Отключить контрольный массив, когда переключатель радиоуправления не установлен

Question

Im пытается установить 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

Мой код отключает только первый элемент массива checkbox и НЕ остальную часть массива.

Это потому, что 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

Вы назначили все свои входы одному и тому же идентификатору «txtUserID []», что запрещено. Если вы захотите использовать jQuery, вы можете просто назначить класс входам (вам разрешено использовать один и тот же класс, но не id). Это может выглядеть примерно так:

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

В JavaScript/JQuery

$(".myClass").disabled = true 

Answer 4

Если удалить дублированные идентификаторы, то вы можете использовать это ...

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

удалить идентификатор из флажков и добавьте 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, так что вы не должны иметь один и тот же идентификатор на всех CheckBox элементов. getElementById возвращает только один элемент, поскольку он ожидает, что идентификатор будет уникальным, только первый флажок будет отключен.

Я хотел бы предложить, что вы даете все эти флажки класс:

<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; 
} 

Unique: Два элемента не могут иметь один и тот же идентификатор, как друг с другом.

Answer 7

Вы делаете распространенную ошибку. Ваши «входы» имеют одинаковый «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[]"); 

Надеется, что это помогает.

С уважением, Мегаджин