2

我想这很简单，但不幸的是我根本不了解 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“全选”复选框之后，它也不会影响第二组的复选框。

4

4 回答 4

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();
于 2013-04-11T12:05:35.533 回答
1

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');
于 2013-04-11T12:10:58.963 回答
0

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

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

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

    });

演示

于 2013-04-11T12:06:11.150 回答
0 
<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>
于 2013-04-11T12:18:49.520 回答