Check only non-disabled

Question

I have a sequence of checkboxes that can be disabled or not through the disabled in the input tag

By clicking on the parent checkbox, I need only those NOT disabled to be checked

Current and desired:

Code so far:

$("#checkAll").click(function () {
   $("input:checkbox").not(this).prop("checked", this.checked);
});

Thank you friends, all the mentioned methods worked perfectly in solving my problem! — David Custódio, Jan 10 '22 at 16:22

Tom · Accepted Answer · 2022-01-10T16:03:11.410

You could use the :not() selector combined with the has attribute selector :

$("#checkAll").change(function () {
   $("input:checkbox:not([disabled])").prop("checked", this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />

As suggested by @connexo, you should use .change() instead of .click(). See this answer for more information.

score 1 · Answer 2 · answered Jan 10 '22 at 15:59

Vanilla JS, always preferred:

document.getElementById('checkAll').addEventListener('change', function() {
  for (const cb of document.querySelectorAll('input[type=checkbox]:not([disabled])')) {
    if (cb !== this) cb.checked = this.checked;
  }
});

<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />

Check only non-disabled

2 Answers2