javascript javascript中的DOM“禁用”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23701560/
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
DOM 'disabled' property in javascript
提问by Legion
I can't find a definitive answer to how to use the disabled property to disable form elements in javascript.
我找不到有关如何使用 disabled 属性禁用 javascript 中的表单元素的明确答案。
Some places say it's a simple boolean. Other's say to set it to the string value 'disabled' to disable, empty string '' to enable. Or there's adding and removing the disabled attribute, usually in combination with a string value.
有些地方说这是一个简单的布尔值。其他人说将其设置为字符串值 'disabled' 禁用，空字符串 '' 启用。或者添加和删除 disabled 属性，通常与字符串值结合使用。
So which is the proper way to do it cross browser? (no jQuery). How did something as simple as an enable flag get so butchered?
那么跨浏览器的正确方法是什么？（没有jQuery）。像启用标志这样简单的东西是如何被屠杀的？
-- edit --
- 编辑 -
Sorry, I should have mentioned I'm developing for IE8 (not by choice).
抱歉，我应该提到我正在为 IE8 开发（不是自愿的）。
回答by canon
The following input elements are all disabled:
以下输入元素全部被禁用：
<input disabled />
<input disabled="" />
<input disabled="disabled" />
<input disabled="true" />
<input disabled="false" /> <!-- still disabled! -->If a boolean attribute is present, it's on; otherwise, it's off. The value doesn't mean anything.
如果存在布尔属性，则为开启；否则，它是关闭的。价值不代表什么。
However, when dealing with these elements through javascript, you should make use of the corresponding property, i.e.:
但是，当通过javascript处理这些元素时，你应该利用相应的属性，即：
myInput.disabled = true; // adds the attribute and disables control
myInput.disabled = false; // removes the attribute and enables control
The property will update the attribute for you. This is true of all boolean attribute / property pairs, i.e.: readonly, checked, selected, etc.
该属性将为您更新该属性。这是所有的布尔属性/属性对，即真：readonly，checked，selected等。
Confusion may stem from the fact that setAttribute()asks for both a name and value and emits markup in a key="value"format -even when you don't want a value. When adding a custom boolean attribute, I simply set the attribute without a value (sample):
混淆可能源于这样一个事实，即setAttribute()要求名称和值并以某种key="value"格式发出标记- 即使您不需要值。添加自定义布尔属性时，我只需设置没有值的属性（示例）：
input.setAttributeNode(document.createAttribute("data-custom"));
console.log(input); // <input data-custom>
See document.createAttribute()and Element.setAttributeNode().
见和。document.createAttribute()Element.setAttributeNode()
回答by Bergi
The .disabledpropertyof DOM elements is a boolean value and should get booleans assigned.
DOM 元素的.disabled属性是一个布尔值，应该分配布尔值。
The disabledHTML attribute, like in markup or setAttribute(), is a "boolean html attribute"which means it can take the values empty, disabledor be omitted. See also HTML - Why boolean attributes do not have boolean value?and Correct value for disabled attribute.
的disabledHTML属性，如在标记或setAttribute()，是“布尔HTML属性”，这意味着它可以取值清空，disabled或可以省略。另请参阅HTML - 为什么布尔属性没有布尔值？和禁用属性的正确值。
回答by michaelward82
The existence of the property is enough to trigger the disabled state.
该属性的存在足以触发禁用状态。
If you must set a value for the property then it should be the same as the property name e.g disabled="disabled".
如果您必须为属性设置一个值，那么它应该与属性名称相同，例如disabled="disabled".
I'll try to find some documentation on the specific behaviours of browsers and the relevant specs.
我会尝试找到一些关于浏览器的特定行为和相关规范的文档。
--edit--
- 编辑 -
The HTML5 spec covers boolean attributes, such as disabled, here: http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes
HTML5 规范涵盖布尔属性，例如禁用，此处：http: //www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes
In practice, web browsers will ignore the assigned value and simply look for the presence of the attribute.
在实践中，Web 浏览器将忽略分配的值，而只是查找该属性是否存在。
回答by Ryan S
The disabledattribute is a boolean. If the tag is present the input will be disabled. The confusion around having a string value associated with it usually comes from XHTML validation. In XHTML attribute minimization is forbidden, so it must have a value, and XHTML specification states it must be disabled="disabled".
该disabled属性是一个布尔值。如果存在标签，则输入将被禁用。与字符串值相关联的混淆通常来自 XHTML 验证。在 XHTML 中，属性最小化是被禁止的，所以它必须有一个值，并且 XHTML 规范规定它必须是disabled="disabled".
For any browser, if the tag is present, the input will be disabled, regardless of the string value.
对于任何浏览器，如果存在标记，则无论字符串值如何，输入都将被禁用。
回答by user3597525
Setting disabled to true works on all input types. I've tried it in chrome,firefox,ie edge. Try this;
将 disabled 设置为 true 适用于所有输入类型。我已经在 chrome、firefox、ie edge 中试过了。试试这个;
<!doctype html>
<html lang="en">
<body>
<input type="text" class="disableit">
<textarea class="disableit"></textarea>
<input type="radio" class="disableit">
<select class="disableit"><option>one</option><option>two</option>
<input type="checkbox" class="disableit">
<script>
var inputs = document.getElementsByClassName( "disableit" );
for( var i = 0; i < inputs.length; i++ ){
inputs[i].disabled = true;
}
</script>
</body>
</html>
