Tengo una secuencia de casillas de verificación que se pueden deshabilitar o no a través de deshabilitado en la etiqueta de entrada
Al hacer clic en la casilla de verificación principal, solo necesito que se marquen aquellos que NO están deshabilitados
Actual y deseada:
Código hasta ahora:
$("#checkAll").click(function () { $("input:checkbox").not(this).prop("checked", this.checked); });
Puede usar el selector :not()
combinado con el selector de atributos has :
$("#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" />
Como sugiere @connexo , debe usar .change()
en lugar de .click()
. Ver esta respuesta para más información.
Vanilla JS, siempre preferido:
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" />