选中复选框时，按类别禁用输入

Question

So I have dynamically created checkboxes that share the same class:

<input type="checkbox" class="boxes" />
<input type="checkbox" class="boxes" />

And have a few dropdown options that share that same class also:

<select class = "needToDisable">
  <option value="volvo">Volvo</option>
</select>

As these are generated dynamically, I went for this approach to check if the length of the checked checkboxes is > 0. If so disable all dropdowns with the class "needToDisable"

 $(".boxes").on('click',function(){
      if ($('.boxes:checked').length > 0) {
            $(".boxes").prop("disabled", true);
       } else {
         $(".boxes").prop("disabled", false);  
       }     
  });

I have seen a few other examples like:

Using jquery to get all checked checkboxes with a certain class name

But it says "click" is not defined, I don't think I can use in this way.

Answer 1

First, you need to use 'click' and not click . Secondly, your select class is needToDisable , which needs to be disabled and not .boxes . Below is a small working demo:

 $(".boxes").on('click', function() { $(".needToDisable").prop("disabled", $('.boxes:checked').length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="boxes" /> <input type="checkbox" class="boxes" /> <select class="needToDisable"> <option value="volvo">Volvo</option> </select>