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 — Sven Eberth
– Sven Eberth, Commented Sep 1, 2021 at 0:07
Just a heads up, I think you are perhaps conflating "selector" and "select". I've personally never heard <select /> 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
– Alexander Nied, Commented Sep 1, 2021 at 0:10
@SvenEberth, I tried the two main solutions from that answer, but can't make it work, see in here .Again, I don't know If I am messing up something.... — Eduardo
– Eduardo, Commented Sep 1, 2021 at 1:23
@AlexanderNied, thanks for the fast response. I was adapting the <select> from a bootstrap theme, I think it's the correct nomenclature, have been working with them without any problems, I am using Flask, and those to select some options, perhaps, the title in my question is incorrect. — Eduardo
– Eduardo, Commented Sep 1, 2021 at 1:28

epascarello · Accepted Answer · 2021-09-01 02:28:15Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related