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

Question

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?

Does this answer your question? [jQuery see if any or no checkboxes are selected](https://stackoverflow.com/questions/4086957/jquery-see-if-any-or-no-checkboxes-are-selected) — Sven Eberth, Sep 01 '21 at 00:07
Just a heads up, I think you are perhaps conflating "selector" and "select". I've personally never heard `` elements referred to as "selectors", but I _do_ think of "selectors" as a way to match elements in CSS or with `querySelector`/`querySelectorAll`. This could be something that differs based on discipline or region, though, I suppose. — Alexander Nied, Sep 01 '21 at 00:10
@SvenEberth, I tried the two main solutions from that answer, but can't make it work, see in [here](https://jsfiddle.net/n2ysuL8e/) .Again, I don't know If I am messing up something.... — Eduardo, Sep 01 '21 at 01:23
@AlexanderNied, thanks for the fast response. I was adapting the ` — Eduardo, Sep 01 '21 at 01:28

score 1 · Accepted Answer · answered Sep 01 '21 at 02:28

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>

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

1 Answers1