使用 JavaScript 禁用按钮

disabling buttons using javascript

本文关键字：按钮 JavaScript 使用      更新时间：2023-09-26

我有四个按钮，其中 button2 作为 id。

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

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

我有四个按钮，按钮 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. 如果这是在 form ，虽然在这种情况下这样做很好，因为这些是按钮，但在一般情况下您可能不想为此使用name。例如，如果对多个文本字段或选择框使用相同的name，则必须确保在收到重复的字段名称时在服务器端直接处理。

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

  3. 注意不要在同一页面上使用 "button2" 作为id，因为 IE8 及更早版本中有一个错误，即使它没有，也会让它表现得像该元素具有name "button2"。这与我在这里谈论的与getElementById有关的错误相同。

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

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

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

document.getElementById('button1').disabled=true;
document.getElementById('button2').disabled=true;
相关文章：