Question

我找不到如何使用disabled属性来禁用javascript中的表单元素的明确答案。

有些地方说它是一个简单的布尔值。其他人说将其设置为字符串值'禁用'以禁用，将空字符串''设置为启用。或者添加和删除disabled属性，通常与字符串值结合使用。

那么跨浏览器的正确方法是什么？（没有jQuery）。像启用标志这样简单的东西是如何被屠杀的？

- 编辑 -

对不起，我应该提到我正在为IE8开发（不是选择）。

Answer 1

以下输入元素均已禁用：

＆＃13;

<input disabled />
<input disabled="" />
<input disabled="disabled" />
<input disabled="true" />
<input disabled="false" /> <!-- still disabled! -->

＆＃13;

如果存在布尔属性，则它会打开;否则，它关闭了。这个价值并不意味着什么。

但是，在通过javascript处理这些元素时，您应该使用相应的属性，即：

myInput.disabled = true; // adds the attribute and disables control
myInput.disabled = false; // removes the attribute and enables control

该属性将为您更新属性。所有布尔属性/属性对都是如此，即：readonly，checked，selected等。

混淆可能源于这样一个事实：setAttribute()要求提供名称和值，并以key="value"格式发出标记 - 即使您不想要一个值。添加自定义布尔属性时，我只需设置没有值（sample）的属性：

input.setAttributeNode(document.createAttribute("data-custom"));
console.log(input); // <input data-custom>

_{请参阅document.createAttribute()和Element.setAttributeNode()。}

Answer 2

DOM元素的.disabled property是一个布尔值，应该分配布尔值。

disabled HTML属性（如标记或setAttribute()）是"boolean html attribute"，这意味着它可以将值设为空，disabled或省略。另请参阅HTML - Why boolean attributes do not have boolean value?和Correct value for disabled attribute。

Answer 3

该属性的存在足以触发禁用状态。

如果您必须为该属性设置一个值，那么它应该与属性名称相同，例如disabled="disabled"。

我将尝试查找有关浏览器的特定行为和相关规范的一些文档。

- 编辑 -

HTML5规范涵盖布尔属性，例如禁用，在此处：http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes

实际上，Web浏览器将忽略指定的值，只是查找属性的存在。

Answer 4

disabled属性是布尔值。如果标签存在，则输入将被禁用。关于具有与之关联的字符串值的混淆通常来自XHTML验证。在XHTML中，属性最小化是禁止的，因此它必须具有值，并且XHTML规范声明它必须是disabled="disabled"。

对于任何浏览器，如果存在标记，则无论字符串值如何，都将禁用输入。

JsFiddle Demo

w3c disabled attribute spec

Answer 5

将disabled设置为true适用于所有输入类型。我试过它在chrome，firefox，即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>

javascript中DOM'禁用'属性

5 个答案: