javascript - 使用 javascript 禁用按钮

Question

我有四个按钮，按钮 2 作为 id。

document.getElementById('button2').disabled=true;

使用上面的代码，只有一个按钮被禁用。我希望禁用所有按钮。
有任何想法吗。
谢谢你。

Answer 1

我有四个按钮，按钮 2 作为 id。

不要这样做，这是无效的。id值在文档中必须是唯一的。

相反，也许给他们同样的class：

<input type="button" class="button2">
<input type="button" class="button2">
<input type="button" class="button2">
<input type="button" class="button2">

然后在现代浏览器上你可以这样做：

var list = document.querySelectorAll(".button2");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].disabled = true;
}

这适用于几乎所有的当前版本。它不适用于 IE7 及更早版本。如果你需要支持这些，我推荐使用一个不错的 DOM 操作库（如jQuery、YUI、Closure或其他任何一个），它能够按类查找元素。

---

或者，您可以给它们相同的值name并使用旧的getElementsByName，甚至在 IE6 和 IE7 上：

<input type="button" name="button2">
<input type="button" name="button2">
<input type="button" name="button2">
<input type="button" name="button2">

然后是相同的循环：

var list = document.getElementsByName("button2");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].disabled = true;
}

但是有一些注意事项要使用name：

1. 如果这是在 a 中form，虽然在这种情况下这样做会很好，因为这些是按钮，但您可能不想name在一般情况下使用它。例如，如果您对多个文本字段或选择框使用相同name的内容，则必须确保在收到重复的字段名称时在服务器端正确处理。

2. 同样，虽然可以很好地用于此用途，但name它只是表单字段上的有效属性，而不是其他类型的元素。因此，虽然按钮还可以，但您不想概括它。

3. 注意不要在同一页面上使用"button2"as an ，因为 IE8 和更早版本中存在一个错误，即使它没有id，它也会使其表现得像那个元素有一样。这与我在这里name "button2"谈到的与.getElementById

所以总的来说，class可能是更好的方法。

Answer 2

单个页面上应该只出现 1 次 id 值。为每个按钮使用不同的 id 值（例如，对一个按钮使用 id="button1"，对另一个按钮使用 id="button2"。

然后您可以禁用每个按钮，一次一个：

document.getElementById('button1').disabled=true;
document.getElementById('button2').disabled=true;