如果未选中另一组中的复选框，如何禁用一组复选框答案

【问题标题】：How to disable a group of checkboxes if no checkbox in the other group is selected如果未选中另一组中的复选框，如何禁用一组复选框
【发布时间】：2013-04-03 14:38:06
【问题描述】：

我想这很简单，但不幸的是我根本不懂 JavaScript，也找不到现有的解决方案。

<input type='checkbox' class='group1' name='1'> Name1<br>    
<input type='checkbox' class='group1' name='2'> Name2<br>     
<input type='checkbox' class='group1' name='3'> Name3<br><br>   
<input type='checkbox' class='group2' name='4'> Name4<br>    
<input type='checkbox' class='group2' name='5'> Name5<br>

因此，如果Name1、Name2 和Name3 均未选中，则应禁用Name4 和Name5。

提前谢谢各位！

由于我的页面已经在其

部分中包含了 jQuery，我决定使用需要这个库的变体。因此，我尝试了 Wing Leong 提供的代码，并取得了成功。但是，它有以下两个缺点：

我忘了提到禁用的复选框应该明确设置为未选中。在当前实现中，当我选择第二组中的一个复选框（例如，Name4）然后取消选中第一个中的所有复选框时，Name4 将被禁用但仍处于选中状态。这是完全错误的，因为处理表单的服务器将接受Name4 作为选定选项。如果不是真的，用户可能会感到困惑。
在这个页面上，我有另一个 jQuery 脚本，当用户选择一个名为“全选”的复选框时，它会自动选择第一组的所有复选框。这里是：
```
<input type='checkbox' id='maincb'> Check all
```

为此使用 JavaScript：

<script type="text/javascript">    
    $(document).ready( function() {       
     $("#maincb").click( function() {    
if($('#maincb').attr('checked')) {    
    $('.group1:enabled').attr('checked', true);    
} else {    
    $('.group1:enabled').attr('checked', false);    
}    
});    
    });    
</script>

问题是，这两个脚本不能很好地相互配合。即使在我将类group1 分配给复选框“全选”之后，它也不会影响第二组的复选框。

【问题讨论】：

您必须定义禁用...不可见？无法点击？无法发送？全部？
@zozo：有一个禁用属性<input type="checkbox" disabled="disabled" />
是的......但它曾经有一些问题前一段时间。无论如何...当我 afk 时，你得到了 999 个答案。

标签： javascript html forms checkbox

【解决方案1】：

你想要这样的工作吗？

http://jsfiddle.net/steelywing/MtDLB/1/

$('#check_group1').click(function () {
    $('.group1:enabled').prop('checked', $(this).prop('checked'));
    updateButton();
});

function updateButton() {
    if ($('.group1:checked').length == 0) {
        $('.group2')
            .prop('disabled', true)
            .prop("checked", false);
    } else {
        $('.group2').prop('disabled', false);
    }
}

$('.group1').change(function () {
    updateButton();
});

updateButton();

【讨论】：

是的，这就是我想要的。我更新了我的帖子，添加了一些关于你的脚本的重要细节。

【解决方案2】：

<script type=text/javascript>
function clk(){
if (op1.checked == 1 && op2.checked == 1 && op3.checked == 1){
          op4.checked=1 ;
          op5.checked=1 ;
}
}
</script>


<input type='checkbox' class='group1' onclick="clk()" name='op1'> Name1<br>    
<input type='checkbox' class='group1' onclick="clk()" name='op2'> Name2<br>     
<input type='checkbox' class='group1' onclick="clk()" name='op3'> Name3<br> 
<input type='checkbox' class='group2' name='op4'> Name4<br>    
<input type='checkbox' class='group2' name='op5'> Name5<br>

【讨论】：

【解决方案3】：

HTML

<input type='checkbox' class='group1' name='1'> Name1<br>    
<input type='checkbox' class='group1' name='2'> Name2<br>     
<input type='checkbox' class='group1' name='3'> Name3<br><br>   
<input type='checkbox' class='group2' name='4'> Name4<br>    
<input type='checkbox' class='group2' name='5'> Name5<br>

JavaScript（纯，无 jQuery）

function checkFields() {
    var inputs = document.getElementsByTagName('input');

    if (inputs.length == 5) {
        if (inputs[0].checked == true || inputs[1].checked == true || inputs[2].checked == true) {
            inputs[3].disabled = false;
            inputs[4].disabled = false;
        }
        else {
            inputs[3].disabled = true;
            inputs[4].disabled = true;
        }
    }
}

// On-load
checkFields();

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('click', function() {
        checkFields();
    });
}

可能会将初始的checkFields(); 放入<body onload="">。另外请记住，您希望将 document.getElementsByTagName('input'); 定位到具有 ID 的父包装器上，以免意外匹配页面上的其他输入字段。

HTML

<form id="wrappingForm">
    <input type='checkbox' class='group1' name='1'> Name1<br>    
    <input type='checkbox' class='group1' name='2'> Name2<br>     
    <input type='checkbox' class='group1' name='3'> Name3<br><br>   
    <input type='checkbox' class='group2' name='4'> Name4<br>    
    <input type='checkbox' class='group2' name='5'> Name5<br>
</form>

JavaScript

var wrapper = document.getElementById('wrappingForm');
var inputs = wrapper.getElementsByTagName('input');

【讨论】：

【解决方案4】：

Jquery 是一种选择吗？如果是这样，那就很简单了……

    $('input').click(function() {

        if ($('.group1').is(':checked')) {
             $('.group2').attr('disabled', 'disabled');  
        } else {
            $('.group2').removeAttr('disabled');
        }

    });

DEMO

【讨论】：