如何禁用一组复选框，如果没有选择其他组的复选框

问题描述：

我想这很简单，但不幸的是我根本不知道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应禁用。

在此先感谢，伙计们！

由于我的页面已在其< head>部分中包含jQuery，因此我决定使用需要此库的变体。所以，我尝试了代码永隆提供，这是一个成功。然而，它有以下两个缺点：

我忘了提及禁用的复选框应该显式设置为未选中状态。在当前的实现中，当我选择第二组中的一个复选框（例如，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 2013-04-11 12:01:25

@zozo：有一个禁用的属性'' – 2013-04-11 12:28:22

是啊......但它过去有一些问题。无论如何...当我在AFK时你有999个答案。 – zozo 2013-04-11 14:28:14

答

你想要这样的工作吗？

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

是的，这是我想要的。我更新了我的帖子，添加了关于您的脚本的一些重要细节。 – Cuder 2013-04-12 12:16:45

已更新，请参阅示例http://jsfiddle.net/steelywing/MtDLB/1/ – 2013-04-12 17:36:12

答

是jQuery的一个选择吗？如果是的话这是非常简单的...

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

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

    });

DEMO

答

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

答

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

如何禁用一组复选框，如果没有选择其他组的复选框

相关推荐