javascript - 如果未选择另一组中的复选框，如何禁用一组复选框

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 包含在其 < head > 部分中，因此我决定使用需要此库的变体。 因此，我尝试了Wing Leong提供的代码，并且成功了。但它有以下两个缺点:

1. 我忘了提及禁用的复选框应明确设置为取消选中。在当前的实现中，当我选择第二组中的一个复选框(例如 Name4)，然后取消选中第一个组中的所有复选框时，Name4 将被禁用但还是检查了。这是完全错误的，因为处理表单的服务器将接受 Name4 作为所选选项。如果不是这样，用户可能会感到困惑。

2. 在此页面上，我有另一个 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 分配给复选框“全选”之后，它也不会影响第二组的复选框。

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