当单选按钮未被选中时，禁用复选框阵列

Question

我试图以disable复选框阵列当相应的radio按钮未被选中。我的代码仅禁用checkbox数组的第一个元素，而不是数组的其余部分。我可能做错了什么，但我似乎无法弄清楚。

任何帮助都可以。

的Javascript：

<script> 
    function radioDisable(){ 
    if(document.getElementById('rdGrp').checked){ 
     document.getElementById('txtUserID[]').disabled=false; 
    }else{ 
     document.getElementById('txtUserID[]').disabled=true; 
    } 
    } 
</script> 

HTML：

<td> 
    <input type="radio" name="rdAll" id="rdAll" value="all" onchange="radioDisable()"> All Users 
    <br> 
    <input type="radio" name="rdAll" id="rdGrp" value="group" onchange="radioDisable()"> Groups 
    <br> 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="SysAd"> System Admin | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="faculty"> Faculty | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="student"> Student | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="registrar"> Registrar | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="adviser"> Adviser | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="clerk"> Clerk | 
    <input type="checkbox" name="txtUserID[]" id="txtUserID[]" value="management"> Management 
</td> 

Answer 1

我的代码只禁用复选框数组的第一个元素，而不是数组的其余部分。

，由于id应该是同一个文档中独一无二的，如果有与同一id只是第一个多个元素将被选中，你也可以使用名称。

使用getElementsByName()通过他们把所有的复选框和环禁用/启用每一个：

function radioDisable(){ 
    var checkboxes = document.getElementsByName('txtUserID[]'); 
    var disabled = !document.getElementById('rdGrp').checked; 

    for(var i=0;i<checkboxes.length;i++){ 
      checkboxes[i].disabled = disabled; 
    } 
} 

希望这有助于。

Answer 2

使用getElementsByName

function radioDisable(){ 
     var chkBoxes[] = document.getElementsByName('txtUserID[]'); 
     for (var i = 0; i < chkBoxes.length; i++) { 
     if(document.getElementById('rdGrp').checked){ 
      chkBoxes[i].disabled=false; 
      } 
     else{ 
      chkBoxes[i].disabled=true; 
     } 
     } 
    } 

Answer 3

您已将所有输入分配给相同的ID“txtUserID []”，这是不允许的。如果你会考虑使用jQuery，你可以简单地将一个类分配给输入（你可以使用相同的类多次，而不是id）。它可能看起来像：

<input type="checkbox" class="myClass"> 

在使用Javascript/jQuery的

$(".myClass").disabled = true 

Answer 4

如果删除重复的ID，那么你可以使用这个...

function disableCheckboxes(){ 
    var chklist = document.getElementsByName('txtUserID[]'); 
    var chk = !document.getElementById('rdGrp').checked; 
    for(var i=0;i<chklist.length;i++){ 
     chklist[i].disabled=chk; 
    } 
} 

Answer 5

删除ID从复选框并添加class =“txtUserID”。然后更新您的功能类似下面

function radioDisable(){ 
    if(this.checked){ 
    var allChkBox = document.getElementsByName('txtUserID[]'); 
    for(var i =0, len = allChkBox.length; i < len; i++) { 
     allChkBox[i].disabled = this.checked; 
    }  
    } 
} 

Answer 6

每一个元素都需要有一个唯一的ID在HTML所以你不应该对你的所有复选框元素相同的ID。 getElementById将只返回一个元素，因为它期望该ID是唯一的，只有第一个复选框将被禁用。

，我建议你给所有这些复选框类：

<input type="checkbox" name="txtUserID[]" class="example" value="SysAd"> 

然后使用getElementsByClassName

var disableUser = !document.getElementById('rdGrp').checked; 
var x = document.getElementsByClassName("example");  
for (var i = 0; i < x.length; i++) { 
    x[i].disabled = disableUser; 
} 

独特之处：两个元素不能有相同的ID为彼此。

Answer 7

你犯了一个常见的错误。你的“输入”具有相同的“ID”。这是不对的，一个id应该永远是唯一的。如果你想在JavaScript访问一个元素使用：

var uniqueElemem = document.getElementById("txtUserID"); // returns only 1 element. 

如果你想访问一组元素的使用：

// returns an array of all elements which have the class "txtUserGroup". 
var groupElem = document.getElementsByClassName("txtUserGroup"); 

所以，你有你的HTML改变这样的：

<input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="SysAd"> System Admin | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="faculty"> Faculty | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="student"> Student | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="registrar"> Registrar | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="adviser"> Adviser | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="clerk"> Clerk | 
    <input type="checkbox" name="txtUserID[]" class="txtUserGroup" value="management"> Management 

现在，你需要你的Javascript改成这样：

function disableButtons(){ 
    // get all elements with the groupClass 
    var groupElem = document.getElementsByClassName("txtUserGroup"); 

    //is radio checked? 
    if(!document.getElementById('rdGrp').checked){ 

    // Check if the array exists or has at least 1 element 
    if (typeof groupElem !== 'undefined' && groupElem.length > 0) { 

     //iterate through all elements which you want to be disabled 
     for (var index = 0; index < groupElem.length; ++index) { 

     // disable all elements with given class. 
     groupElem[index].disabled=true; 
     } 
    }   
    } 
} 

PS：你并不需要用类，有一个类似的方法：

var groupElem = document.getElementsByName("txtUserID[]"); 

希望这有助于。

Regards，Megajin