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

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

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

在javascript / jquery

中

$(".myClass").disabled = true

Answer 3

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

每个元素都需要在HTML中包含唯一ID ，因此您的所有复选框元素都不应具有相同的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

你犯了一个常见的错误。您的输入＆＃34;确实有相同的＆＃34; id＆＃34;。这不对，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：你不需要使用Classes，有类似的方法：

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

希望这有帮助。

此致，Megajin

未选中单选按钮时禁用复选框数组

7 个答案: