Question

我的JS功能有问题。我将用我的代码和Prt Sc向您解释。

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

这是一个Php函数和JS函数。

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

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

我在'For'jut中使用'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>

更新：更改答案以使用.class名称更新复选框而不是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和NAME令牌必须以字母（[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; } } }

使用javascript禁用多个复选框

2 个答案: