Check only non-disabled-CodePudding

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);
});

CodePudding user response：

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.

CodePudding user response：

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" />