使用javascript禁用多个复选框

Question

我的JS函数有问题。我会用我的代码和Prt Sc向你解释。

代码= http://jsfiddle.net/dKeRf/

这是一个PHP函数和JS功能。

屏幕= http://img824.imageshack.us/i/antoe.png/

如果2复选框过表中的一个被选中时，在这两个表中的所有的复选框必须被禁止。目前它适用于第一个复选框，但不适用于第二个复选框，我问你为什么？ :)

我在我的'For'突出部分中使用'10'进行测试，我将根据表格的行数改变后者。

感谢您的帮助，祝您有美好的一天！

Answer 1

添加一个类的所有复选框：

<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 

然后使用jquery一次更新所有的复选框：

<script> 
$(document).ready(function(){ 
    $(".selectAll").click(function() { 
     if($(".selectAll").attr("checked")) { 
      $(".the_checkbox:checkbox").attr("disabled", true); 
     } else { 
      $(".the_checkbox:checkbox").removeAttr("disabled"); 
     } 
    });   
}); 
</script> 

UPDATE：更改使用的答案。用于更新复选框而不是ID的类名，以便该ID可以保持唯一并符合HTML标准。

Answer 2

ID不允许以数字开头，必须以字母开头。所以document.getElementById(1234)将失败（我认为IE可能不会说出任何东西并允许它，但FF不起作用）。只要在号码前加一个字母并将getElementById更改为document.getElementById('cb'+id2);即可。

此外，只是一个方面说明，如果您通过this函数onClick，该参数是对被单击元素的引用。所以没有必要得到box.id，然后做document.getElementById(checkId)。从技术上说document.getElementById(checkId)是=== box所以你可以只说box.checked。

http://www.w3.org/TR/html4/types.html#h-6.2。这是关于ID属性命名要求的规范：

ID和名称标记必须以字母（[A-Za-z]）开头，后面可以跟随任意数量的字母，数字（[0 -9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

编辑：

甚至比使用document.getElementById()选择每个复选框，是使用document.getElementById()父元素所需的复选框以禁用共享（如它们在表）然后使用document.getElementsByTagName('input')获取所有复选框的集合，并使用该复选框进行循环/禁用。所以JS代码禁用会是什么样子：

一些表：

<input type='checkbox' onClick='checkCBs(this,"someTable1");'> 
<table id='someTable1'> 
    <tr> 
    <td>This is checkbox 1:</td> 
    <td><input type='checkbox' name='group1' value='checkbox1'></td> 
    </tr> 
    <tr> 
    <td>This is checkbox 2:</td> 
    <td><input type='checkbox' name='group1' value='checkbox2'></td> 
    </tr> 
</table> 

代码：

function checkCBs(box, parent){ 
    var parent = document.getElementById(parent), 
     CBs = parent.getElementsByTagName('input'), 
     i; 
    //loop through all input elements 
    for(i=0;i<CBs.length;i++){ 
     //make sure the input is a checkbox 
     if(CBs[i].type && CBs[i].type=='checkbox'){ 
      //set disabled on this checkbox to opposite 
      //of whether box is checked. 
      CBs[i].disabled = !box.checked; 
     } 
    } 

}