如何动态禁用单选按钮组

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。