关于javascript:选中复选框后启用按钮

 2021-04-27 

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个框时,您需要检查其他框的状态。