当使用 jquery 选中至少一个复选框时，如何禁用未选中复选框上的按钮并启用？

Question

我知道这里有几个像我这样的问题。 但我的有点不同。

我想在至少一个复选框或所有复选框被选中时启用该按钮。 并在未选中时禁用它。

问题是，我可以在选中全部或一个时启用按钮。 但是当我取消选中它时。 该按钮未禁用，因为我未选中。

我的概念是当没有选中复选框时。 该按钮被禁用。

 $(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>

或者你可以在这里玩https://jsfiddle.net/cLk8axm0/

Answer 1

所以select所有的checkbox都被勾选了看长度

 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>