如何動態禁用單選按鈕組

Question

我創造我radioGroup中一個元素是這樣的：

var selectorLay1 = document.createElement('input'); 
     var selectorLay1Atributes = { 
      'type': 'radio', 
      'class': "selectorLay1", 
      'id': "radioLay1", 
      'name': "layouts", 
      'onchange': "mv.createLayout(1,1)"}; 

我有這樣不同的元素。但它們都具有相同的名稱：'layouts'。 如何找到所有這些元素並動態禁用它們。

Answer 1

試試這個：

var radios = document.getElementsByName('layouts'); 
for (var i = 0; i< radios.length; i++){ 
    radios[i].disabled = true; 
} 

讀https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByName爲getElementsByName

Answer 2

我建議：

var inputs = document.getElementsByName('layouts'); 
for (var i = 0, len = inputs.length; i<len; i++){ 
    inputs[i].disabled = true; 
} 

Simple demo。

這將選擇的layouts的name的相關要素，然後，在for {...}循環，遍歷這些元素並設置disabled屬性。

使用一個簡單的函數方法：

function disableByName(elName){ 
    var els = document.getElementsByName(elName); 
    if (els !== null){ 
     for (var i = 0, len = els.length; i<len; i++){ 
      els[i].disabled = true; 
     } 
    } 
} 

var button = document.getElementById('radioDisable'); 

button.addEventListener('click',function(e){ 
    e.preventDefault(); 
    disableByName('layouts'); 
}, false); 

Simple demo。

或者，如果你願意，你可以擴展對象原型，讓您直接禁用由document.getElementsByName()選擇返回這些元素：

Object.prototype.disable = function(){ 
    var that = this; 
    for (var i = 0, len = that.length; i<len; i++){ 
     that[i].disabled = true; 
    } 
    return that; 
}; 

document.getElementsByName('layouts').disable(); 

Simple demo。