如何使用 JavaScript 禁用 HTML 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3014649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable HTML button using JavaScript?
提问by Hyman Roscoe
I've read that you can disable (make physically unclickable) an HTML button simply by appending disableto its tag, but not as an attribute, as follows:
我已经读过，您可以简单地通过附加disable到其标签来禁用（使物理上不可点击）HTML 按钮，但不能作为属性，如下所示：
<input type="button" name=myButton value="disable" disabled>
Since this setting is not an attribute, how can I add this in dynamically via JavaScript to disable a button that was previously enabled?
由于此设置不是属性，如何通过 JavaScript 动态添加此设置以禁用以前启用的按钮？
回答by Quentin
Since this setting is not an attribute
由于此设置不是属性
It is an attribute.
它是一个属性。
Some attributes are defined as boolean, which means you can specify their value and leave everything else out. i.e. Instead of disabled="disabled", you include only the bold part. In HTML 4, you shouldinclude only the bold part as the full version is marked as a feature with limited support(although that is less true now then when the spec was written).
某些属性被定义为布尔值，这意味着您可以指定它们的值，而将其他所有内容都排除在外。ie 而不是 disabled=" disabled"，你只包括粗体部分。在 HTML 4 中，您应该只包含粗体部分，因为完整版本被标记为支持有限的功能（尽管现在编写规范时不太正确）。
As of HTML 5, the rules have changed and now you include only the name and not the value. This makes no practical difference because the name and the value are the same.
从 HTML 5 开始，规则发生了变化，现在您只包含名称而不包含值。这没有实际区别，因为名称和值是相同的。
The DOM propertyis also called disabledand is a boolean that takes trueor false.
该DOM属性也被称为disabled并且是采用布尔true或false。
foo.disabled = true;
In theory you can also foo.setAttribute('disabled', 'disabled');and foo.removeAttribute("disabled"), but I wouldn't trust this with older versions of Internet Explorer (which are notoriously buggy when it comes to setAttribute).
从理论上讲，您也可以foo.setAttribute('disabled', 'disabled');和foo.removeAttribute("disabled")，但我不相信旧版本的 Internet Explorer（当涉及到 时，它们是臭名昭著的错误setAttribute）。
回答by kaushar
to disable
禁用
document.getElementById("btnPlaceOrder").disabled = true;
to enable
启用
document.getElementById("btnPlaceOrder").disabled = false;
回答by Andy E
It is an attribute, but a boolean one (so it doesn't need a name, just a value -- I know, it's weird). You can set the property equivalent in Javascript:
它是一个属性，但是一个布尔值（所以它不需要名称，只需要一个值——我知道，这很奇怪）。您可以在 Javascript 中设置等效的属性：
document.getElementsByName("myButton")[0].disabled = true;
回答by Maksim Kondratyuk
Try the following:
请尝试以下操作：
document.getElementById("id").setAttribute("disabled", "disabled");
回答by Patrick Roberts
The official way to set the disabledattribute on an HTMLInputElementis this:
disabled在 an上设置属性的官方方法HTMLInputElement是这样的：
var input = document.querySelector('[name="myButton"]');
// Without querySelector API
// var input = document.getElementsByName('myButton').item(0);
// disable
input.setAttribute('disabled', true);
// enable
input.removeAttribute('disabled');
While @kaushar's answeris sufficient for enabling and disabling an HTMLInputElement, and is probably preferable for cross-browser compatibility due to IE's historically buggy setAttribute, it only works because Elementproperties shadow Elementattributes. If a property is set, then the DOM uses the value of the property by default rather than the value of the equivalent attribute.
虽然@kaushar 的答案足以启用和禁用HTMLInputElement，并且由于 IE 历史上的错误setAttribute，它可能更适合跨浏览器兼容性，但它仅适用于Element属性隐藏Element属性。如果设置了属性，则 DOM 默认使用该属性的值，而不是等效属性的值。
There is a very important difference between properties and attributes. An example of a true HTMLInputElementpropertyis input.value, and below demonstrates how shadowing works:
属性和属性之间有一个非常重要的区别。一个真实HTMLInputElement属性的例子是input.value，下面演示了阴影是如何工作的：
var input = document.querySelector('#test');
// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);
// change the input's value property
input.value = "My New Value";
// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);<input id="test" type="text" value="Hello World" />That is what it means to say that properties shadow attributes. This concept also applies to inherited properties on the prototypechain:
这就是说属性影响属性的意思。这个概念也适用于prototype链上的继承属性：
function Parent() {
this.property = 'ParentInstance';
}
Parent.prototype.property = 'ParentPrototype';
// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
function Child() {
// ES5 super()
Parent.call(this);
this.property = 'ChildInstance';
}
Child.prototype.property = 'ChildPrototype';
logChain('new Parent()');
log('-------------------------------');
logChain('Object.create(Parent.prototype)');
log('-----------');
logChain('new Child()');
log('------------------------------');
logChain('Object.create(Child.prototype)');
// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
document.write(`<pre>${value}</pre>`);
}
function logChain(code) {
log(code);
var object = eval(code);
do {
log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
object = object.__proto__;
} while (object !== null);
}I hope this clarifies any confusion about the difference between properties and attributes.
我希望这可以澄清有关属性和属性之间差异的任何混淆。
回答by Oli
It's still an attribute. Setting it to:
它仍然是一个属性。将其设置为：
<input type="button" name=myButton value="disable" disabled="disabled">
... is valid.
... 已验证。
回答by dplass
If you have the button object, called b: b.disabled=false;
如果您有名为 b 的按钮对象： b.disabled=false;
回答by Benito
I think the best way could be:
我认为最好的方法可能是：
$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);
It works fine cross-browser.
它在跨浏览器上运行良好。
回答by anonymous
<button disabled=true>text here</button>
You can still use an attribute. Just use the 'disabled' attribute instead of 'value'.
您仍然可以使用属性。只需使用“禁用”属性而不是“值”。
