使用javascript禁用按钮

Question

我有四个按钮,button2作为id.

的document.getElementById( 'BUTTON2')禁用=真.

使用上面的代码,只禁用一个按钮.我想要禁用所有按钮.
有任何想法吗.
谢谢.

Answer 1

我有四个按钮,button2作为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"作为id在同一页面上,因为IE8和早期在他们的错误,这将使它像该元素具有name "button2"即使它没有.这是同样的错误我说说这里的关系getElementById.

所以总的来说,class可能是更好的方法.