Enable/Disable input by clicking a checkbox

Asked

Viewed 449 times

1

I have this code:

function EnableDisableTextBox(quant_a0) {
  var txtquant_a0 = document.getElementById("quant_a0");
   txtquant_a0.disabled = quant_a0.checked ? false : true;
  if (!txtquant_a0.disabled) {
    txtquant_a0.focus();
  }
}
<div class="form-group col-md-4">
    <div class="p-3 mb-2 bg-secondary text-white">
      <p>Tamanho do Cartaz</p>
    </div>
    <div class="custom-control custom-checkbox col-md-5">
      <input type="checkbox" class="custom-control-input" name="tamanhoCartaz[]" value="0" id="customCheck1" onclick="EnableDisableTextBox()">
      <label class="custom-control-label" for="customCheck1">Cartaz A0</label>
      <input type="text" name="quant[]" class="form-control" placeholder="Quantidade" id="quant_a0" disabled>
    </div>
    <div class="custom-control custom-checkbox col-md-5">
      <input type="checkbox" class="custom-control-input" name="tamanhoCartaz[]" value="1" id="customCheck2" onclick="EnableDisableTextBox()">
      <label class="custom-control-label" for="customCheck2">Cartaz A1</label>
      <input type="text" name="quant[]" class="form-control" placeholder="Quantidade" id="quant_a1" disabled>
    </div>
    <div class="custom-control custom-checkbox col-md-5">
      <input type="checkbox" class="custom-control-input" name="tamanhoCartaz[]" value="2" id="customCheck3" onclick="EnableDisableTextBox()">
      <label class="custom-control-label" for="customCheck3">Cartaz A2</label>
      <input type="text" name="quant[]" class="form-control" placeholder="Quantidade"id="quant_a2" disabled>
    </div>
    <div class="custom-control custom-checkbox col-md-5">
      <input type="checkbox" class="custom-control-input" name="tamanhoCartaz[]" value="3" id="customCheck4" onclick="EnableDisableTextBox()">
      <label class="custom-control-label" for="customCheck4">Cartaz A3</label>
      <input type="text" name="quant[]" class="form-control" placeholder="Quantidade" id="quant_a3" disabled>
    </div>
    <div class="custom-control custom-checkbox col-md-5">
      <input type="checkbox" class="custom-control-input" name="tamanhoCartaz[]" value="4" id="customCheck5" onclick="EnableDisableTextBox()">
      <label class="custom-control-label" for="customCheck5">Cartaz A4</label>
      <input type="text" name="quant[]" class="form-control" placeholder="Quantidade" id="quant_a4" disabled>
    </div>
  </div>

The idea would be to enable/disable inputs[text] by clicking on the checkbox

  • 1

    Please click on [Edit] and improve the title of your question. As it stands, the title does not reveal any information regarding your question. The idea of the title is precisely to inform the content of the question to the reader without it needing to access the same.

  • I was working out the answer when they closed the question. Just switch your function to: function EnableDisableTextBox(element) {&#xA; element.parentElement.querySelector('[id*="quant_"]').disabled = !!element.checked;&#xA; } and in her call put this as parameter: onclick="EnableDisableTextBox(this)

  • Basically the above code will receive the checkbox object and through its parent, pick up the input with id started with quant_ and then change the disabled attribute to the same checkbox status

  • 1

    Perhaps the Portuguese of the question is not the usual, now mark as it is not clear enough I totally disagree! AP simply wants to enable input when the relative checkbox is checked. Otherwise, I consider myself the dumbest human being!!!

  • I put the answer in your own question

  • 1

    @Leocaracciolo You should not put the answer in the question that is not how the site works and you certainly know it. Those who closed thought they had sufficient reason to do so, and if they disagree, open a question at the finish asking for the reopening. Remember that we are all human and can make mistakes but personally I think the question is not very clear. It gives the idea that the goal is to deactivate the field next to the check, but you can’t be sure because the author of the question did not clarify. In the meantime, I suggest you reverse your edit.

  • @Isac, before editing for me was already clear enough, now then Ativar/Desativar input ao clicar em um checkbox nor will I comment... But I will provide response otherwise.

  • Du Santos, you can see a solution at this link http://kithomepage.com/sos/enable-disable-input-with-checkbox.html After you have accessed the link, leave a comment for me to remove it from the air

Show 3 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.