Disable inputs by class when checkbox selected

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.

Typo - `click` instead of `'click'`. – kind user Aug 02 '17 at 09:24 — kind user, Aug 02 '17 at 09:24

score 2 · Accepted Answer · answered Aug 02 '17 at 09:27

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>

Disable inputs by class when checkbox selected

1 Answers1