mardi 31 août 2021

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?




Aucun commentaire:

Enregistrer un commentaire