How to disable an input field after ticking a checkbox?

Asked

Viewed 74 times

1

Hello, folks, I would like to know how to enable / disable an input field after user select an option in a checkbox?

My form has a question and if the user selects the "No" checkbox, I would like to disable the following field:

<ul class="nav">
   <li>
      <div>
         <label>Possui Dependentes?</label>
            <input type="checkbox" id="checkDependentesSim" name="Dependentes[1][]"> Sim
            <input type="checkbox" id="checkDependentesNao" name="Dependentes[1][]"> Não
      </div>
   </li>
   <li>
      <!-- Quero que o input nessa div fique habilitado caso o usuário selecione "Sim",
      senão, fica 'disabled' -->
      <div>
         <label>Quantidade de Dependentes</label>
         <input type="text" required style="border: solid 0.5px #000; width: 300px; height: 37px;">
      </div>
   </li>
</ul>

I already have a JS that unchecks one option if the user chooses the other (uncheck "Yes" if the user clicks "No", and vice versa):

$("input:checkbox").on('click', function() {
   var $box = $(this);
   if ($box.is(":checked")) {
      var group = "input:checkbox[name='" + $box.attr("name") + "']";
      $(group).prop("checked", false);
      $box.prop("checked", true);
   } else {
      $box.prop("checked", false);
   }
});

I need a JS function to check, when the user clicks the checkbox, whether the next field will be disabled or not.

  • What is your level of javascript knowledge, Renan?

  • Basic, man... I can say that I am beginner, at most, going to intermediate. But beginner still! Hehe

  • To begin with I believe the principle is wrong, what you need is an input:radio, not input:checkbox. The radio already comes with this option to uncheck the other.

  • All right, that’s a good suggestion... But still, I would need a function to enable / disable the next field, right?

  • Important [Dit] and make clear the part that has the difficulty (what tried, and what came out different than expected). Reducing the code to a [mcve] helps a lot.

  • Someone blocked the answer system for this question so I’ll help you with the comments.

  • Gee, that’s too bad... I don’t do well on this site. :(

  • What you need to do is put or remove the disblaed or readonly attribute in the field, like this: $('#idQtdDepending'). attr('disabled','disabled'); Automatic.

  • 1

    I was formulating an answer. It’s beginner’s question, he has to use a radio in place of checkbox, create a css with that class.disabled {&#xA; pointer-events: none;&#xA; opacity: 0.4;&#xA;} and in the JS depending on the value of radio use addClass("disabled") or removeClass("disabled")

  • Augusto gave a good suggestion too.

  • @Renan make the javascript code cleaner, and take the comments in English, which will be reopened.

  • I took the comments, @Augustovasques, thanks! What if I use radio with the style of the checkbox, is there a way? And how do I check the value of radio in JS? It would look something like this: var checkBoxSim = Document.getElementById("checkSim"); if (checkBoxSim.checked === true) { // blablablabla } ?

  • 1

    Although I don’t think this is a very good question, I still think it is responsive and valid. I voted for the reopening.

  • 1

    I create an example here for you take a look if it is more or less this

  • Since you will use yes or no, why not just use a checkbox, in case it is checked it is yes and unchecked no?

  • 1

    Thanks, guys, I managed to solve using a simpler function... Still, thank you all for your help!

Show 11 more comments
No answers

Browser other questions tagged

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