Question

我想这很简单，但遗憾的是我根本不懂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包含在其＆lt;头＆gt;部分，我决定使用需要此库的变体。所以，我尝试了提供的代码 Wing Leong ，这是成功的。但是，它有以下两个缺点：

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

JavaScript for this：

<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分配给“全部检查”复选框，也无论如何都不会影响第二组的复选框。

Answer 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();

Answer 2

<强> 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="">。另外请记住，您希望在具有ID的父包装上定位document.getElementsByTagName('input');，以免意外地匹配页面上的其他输入字段。

<强> 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');

Answer 3

Jquery是一个选择吗？如果是这样，那很简单......

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

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

    });

DEMO

Answer 4

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

如果未选中其他组中的复选框，如何禁用一组复选框

4 个答案: