如何动态禁用radioButton组答案

【问题标题】：How to dynamically disable radioButton group如何动态禁用radioButton组
【发布时间】：2019-05-16 19:53:40
【问题描述】：

我在我的 radioGroup 中创建一个元素，如下所示：

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

我有这样的不同元素。但它们都有相同的名称：'layouts'。如何找到所有这些元素并动态禁用它们。

【问题讨论】：

你意识到这将（当然似乎）创建多个具有相同id的元素？
只有name属性相同

标签： javascript radio-button

【解决方案1】：

试试这个：

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

为getElementsByName阅读https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByName

【讨论】：

【解决方案2】：

我建议：

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

Simple demo.

这将选择具有name 或layouts 的相关元素，然后在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.

或者，如果您愿意，您可以扩展 Object 原型以允许您直接禁用 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.

【讨论】：