选中复选框时启用按钮答案

【问题标题】：Enable button when checkboxes selected选中复选框时启用按钮
【发布时间】：2011-09-02 18:48:25
【问题描述】：

我有多个复选框和一个最初禁用的提交按钮。选中框时，按钮已启用并在取消选中时，再次禁用按钮。

如果选择了多个复选框但取消选中一个，即使我选择了其他复选框，该按钮也会被禁用。我该如何解决这个问题？

<script type="text/javascript"> 
$(function() {
    $(".checkbox").click(function() {
      $(".delete").attr("disabled", !this.checked);
    });
});
</script>

HTML

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$(function() {
    $(".checkbox").click(function(){
        $('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
    });
});

演示：http://jsfiddle.net/AlienWebguy/3U364/

【讨论】：

也许你的意思是input.checkbox？

【解决方案2】：

试试这个，我基本上是在检查是否所有的复选框都没有被选中，然后禁用按钮。

$(function() {
    $(".checkbox").click(function() {
      $(".delete").attr("disabled", !$(".checkbox:checked").length);
    });
});

【讨论】：

这非常优雅，尽管我认为它的行为不是 OP 想要的方式。也许它应该更像disabled = !$('.checkbox:checked').size()？这样只有在至少有一个复选框被选中时才会启用提交。
哦，我认为是另一种方式。好吧，我修改了我的答案谢谢。
我修改了我的答案，你们可以删除否决票吗？
@CyberJunkie - 看看这个答案很简单。
@CyberJunkie - 如果您满意，您可以接受这个答案吗？

【解决方案3】：

实现一个计数器来跟踪检查了多少，而不仅仅是禁用按钮。每次选中一个框时加 1，每次未选中框时减 1。一旦计数器达到 0，禁用该按钮。当它变为 1 时，启用该按钮（如果它更改为任何更高的数字，它将已经启用，因此您不需要每次都启用它）。示例：

<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");
            }
        }
    }
}
</script>

【讨论】：

谢谢，这很直观，但我尝试使用最紧凑的解决方案。

【解决方案4】：

每次切换 1 个框时，您需要检查其他框的状态。

【讨论】：

【解决方案5】：

您可以为每个复选框构建一个数组。然后，循环检查检查，并在检查时退出循环（这是你关心的）。如果您到达循环的末尾并检查所有内容是否为假，则禁用该按钮。

这将防止取消选中禁用按钮。

您目前只选中“这个”复选框而不是全部。

【讨论】：