CODEWITHSUNDEEP
javascripthtmljquerycheckbox
Eduardo
Eduardo

Reputation: 73

multiple check boxes to enable/disable just one selector in javascript

I am trying to make a selector available, only if a check box, or more than one are checked. The selector should go back to being disabled if the user unchecks all the checkboxes.

I was trying to implement my solution from this response (that it works perfect for one checkbox paired with any other selector) ; however, when I implement it like this:

$(document).ready(function(){
  var enable_sel = function(){
    $("#pizza_kind").prop("disabled", !$(":checkbox").prop("checked"));
  };

  enable_sel();
  $(":checkbox").change(enable_sel);

}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="checkbox" id="p1" name="p1">
  <input type="checkbox" id="p2" name="p2">
  <input type="checkbox" id="p3" name="p3">

  <select name="pizza_kind" id="pizza_kind">
    <option>(choose one)</option>
    <option>"Hawaian"</option>
    <option>"Peperonni"</option>
    <option>"Another"</option>
  </select>
</form>

I got the selector disabled, but it seems that is only reacting to the first checkbox, not the rest of them.

I couldn't make this work in the javascript/html snippet, don't know why.

I am currently using Flask and jquery 3.6.0

What am I doing wrong?

Upvotes: 0

Views: 1171

Answers (1)

epascarello
epascarello

Reputation: 207501

When you read a prop from a collection it will only ever select the first one. It is not going to randomly pick the one you want, so you need to tell it exactly what to pick.

So select the checked checkboxes and check the length. To do this use :checked in the selector and it will pick the ones that are checked.

$(document).ready(function(){
  var enable_sel = function(){
    $("#pizza_kind").prop("disabled", !$(":checkbox:checked").length);
  };

  enable_sel();
  $(":checkbox").change(enable_sel);

}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="checkbox" id="p1" name="p1">
  <input type="checkbox" id="p2" name="p2">
  <input type="checkbox" id="p3" name="p3">

  <select name="pizza_kind" id="pizza_kind">
    <option>(choose one)</option>
    <option>"Hawaian"</option>
    <option>"Peperonni"</option>
    <option>"Another"</option>
  </select>
</form>

Upvotes: 1

Related Questions