Enable button when checkboxes selected
我有多个复选框和一个最初被禁用的提交按钮。选中一个复选框时,该按钮处于启用状态;而取消选中时,该按钮又被禁用。
如果选中了多个复选框,但未选中其中一个,则即使我选择了其他复选框,该按钮也会被禁用。如何解决此问题?
1 2 3 4 5 6 | <script type="text/javascript"> $(function() { $(".checkbox").click(function() { $(".delete").attr("disabled", !this.checked); }); }); |
HTML
1 2 3 4 5 | <input type="checkbox" name="msg[]" value="32" class="checkbox" /> <input type="checkbox" name="msg[]" value="44" class="checkbox" /> <input type="checkbox" name="msg[]" value="26" class="checkbox" /> <button type="submit" class="delete" disabled="disabled">Delete</button> |
1 2 3 4 5 | $(function() { $(".checkbox").click(function(){ $('.delete').prop('disabled',$('input.checkbox:checked').length == 0); }); }); |
演示:http://jsfiddle.net/AlienWebguy/3U364/
实现一个计数器来跟踪已检查的数量,而不仅仅是禁用按钮。每次选中一个框时加1,每取消选中一个框则减1。一旦计数器达到0,请禁用该按钮。当其更改为1时,请启用该按钮(如果更改为任何更大的数字,它将被启用,因此您无需每次都启用它)。样本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> var boxcounter; $(function() { boxcounter = 0; $(".checkbox").click(function() { if(this.checked) { counter++; if(counter == 1){ $(".delete").attr("disabled",""); } } else { counter--; if(counter == 0){ $(".delete").attr("disabled","disabled"); } } } } |
在基本上检查所有复选框是否都未选中的位置尝试此操作,然后禁用该按钮。
1 2 3 4 5 | $(function() { $(".checkbox").click(function() { $(".delete").attr("disabled", !$(".checkbox:checked").length); }); }); |
您可以为每个复选框构建一个数组。
然后,循环测试" checked",然后退出" checked"循环(这就是您所关心的)。
如果到达循环末尾并检查所有结果是否为假,请禁用该按钮。
这将防止一个未选中状态禁用该按钮。
您当前仅选中" this "复选框,而不是全部。
每次切换1个框时,您需要检查其他框的状态。