未選中單選按鈕時禁用復選框數組

Question

我沒有選擇相應的radio按鈕時試圖disable復選框數組。 我的代碼僅禁用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的元素，那么只會選擇第一個，因此可以使用name代替。

使用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“ txtUserID []”，這是不允許的。 如果您考慮使用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

你犯了一個常見的錯誤。 您的“輸入”確實具有相同的“ 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[]");

希望這可以幫助。

此致Megajin