Sé que hay varias preguntas como la mía publicadas aquí. Pero el mío es un poco diferente.
Quiero habilitar el botón cuando al menos una casilla de verificación o todas estén marcadas. Y desactívelo cuando no se marque ninguno.
El problema es que puedo habilitar el botón cuando todos o uno están marcados. Pero cuando lo desmarco. El botón no está deshabilitado ya que desmarqué.
Mi concepto es cuando no hay ninguna casilla de verificación marcada. El botón está deshabilitado.
$(function() { $('#checkall').change(function() { $('.inv').prop('checked', this.checked); $('button[type="submit"]').removeAttr('disabled'); }); $('.inv').change(function() { if ($('.inv:checked').length == $('.inv').length) { $('#checkall').prop('checked', true); $('button[type="submit"]').removeAttr('disabled'); } else { $('#checkall').prop('checked', false); $('button[type="submit"]').attr('disabled', 'disabled'); } }); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered"> <tr> <th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th> <th>Product</th> <th>Cost</th> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td> <td>Unit 1</td> <td>$10</td> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td> <td>Unit 1</td> <td>$8</td> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td> <td>Unit 1</td> <td>$20</td> </tr> </table> <button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>O puedes jugar aquí https://jsfiddle.net/cLk8axm0/
Así que seleccione todas las casillas de verificación que están marcadas y mire la longitud
const cbs = $(".inv"); const checkAllCb = $("#checkall"); checkAllCb.on("change", function () { cbs.prop("checked", this.checked).eq(0).trigger('change'); }); cbs.on("change", function () { const checkedCount = $('.inv:checked').length; $('button[type="submit"]').prop("disabled", checkedCount === 0); checkAllCb.prop("checked", cbs.length === checkedCount); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered"> <tr> <th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th> <th>Product</th> <th>Cost</th> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td> <td>Unit 1</td> <td>$10</td> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td> <td>Unit 1</td> <td>$8</td> </tr> <tr> <td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td> <td>Unit 1</td> <td>$20</td> </tr> </table> <button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>