Question

我有一个正在构建的表单，并希望有一个javascript来选择和操作指定数组中的所有字段：

<input type="text" name="location[street]" value required />
<input type="text" name="location[city]" value required />
<input type="text" name="location[zip]" value required />
<input type="text" name="location[state]" value required />

如何构建javascript选择器以切换所有元素禁用状态？

Jquery是可能的，但不是首选。我更喜欢一种没有库的方法 - 例如document.getElementsByName（）。

Answer 1

我相信querySelectorAll不支持选择器通过属性获取元素，就像jQuery是input[name^="location"]（docs）。所以，试试这个：

var els = document.querySelectorAll('input');

for (var i = 0; i < els.length; i++)
{
    if (els[i].name.indexOf("location") > -1)
    {
        els[i].disabled = true;
    }
}

Fiddle。我很高兴听到我错了，只有使用选择器才能做到这一点。

无论如何，如果您愿意，可以使用fieldset并通过仅禁用字段集使代码更具语义性。Fiddle。

<强>更新

要同时禁用所有textarea和select元素，只需在选择器中包含这些标记：

var els = document.querySelectorAll('input, textarea, select');

Fiddle

Answer 2

queryselector的替代方法是getElementsByTagName

var i;
var inputs = document.getElementsByTagName("input");

for (i = 0; i < inputs.length; ++i) {
 var name =  inputs[i].getAttribute("name");
    if(name.indexOf("location") > -1)
    {
    inputs[i].disabled = true;
        console.log(name);

    }
}

link to JSFIddle

Javascript选择具有数组样式名称的所有HTML输入字段

2 个答案: