disabled 属性的正确值是多少？

Question

文本框或文本区域的disabled 属性的正确值是多少？

我以前见过以下用法：

<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />

Answer 1

• 对于 XHTML，<input type="text" disabled="disabled" /> 是有效的标记。
• 对于 HTML5，<input type="text" disabled /> 是有效的，并被 W3C 用于他们的示例。
• 事实上，这两种方式都适用于所有主流浏览器。

Answer 2

HTML5 规范：

http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute：

检查的内容属性是一个布尔属性

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes：

元素上存在布尔属性表示真值，不存在该属性表示假值。

如果该属性存在，其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值，并且没有前导或尾随空格。

结论：

以下是有效、等效和真实的：

<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />
<input type="text" disabled="DiSaBlEd" />

以下是无效：

<input type="text" disabled="0" />
<input type="text" disabled="1" />
<input type="text" disabled="false" />
<input type="text" disabled="true" />

属性的缺失是 false 的唯一有效语法：

<input type="text" />

推荐

如果您关心编写有效的 XHTML，请使用 disabled="disabled"，因为 <input disabled> 是无效的，并且其他替代方案的可读性较差。否则，只需使用 <input disabled>，因为它更短。

Answer 3

我刚刚尝试了所有这些，而对于 IE11，似乎唯一可行的是 disabled="true"。禁用的值或没有给出的值不起作用。事实上，jsp 得到了一个错误，所有字段都需要 equal，所以我必须指定 disabled="true" 才能工作。

Answer 4

在 HTML5 中，没有正确的值，所有主流浏览器并不真正关心属性是什么，他们只是检查属性是否存在，因此元素被禁用。

Answer 5

来自 MDN 的 setAttribute()：

要设置布尔属性的值，例如disabled，您可以指定任何值。空字符串或属性名称是推荐值。重要的是，如果该属性完全存在，无论其实际值如何，它的值都被认为是 true。该属性的缺失意味着它的值为false。通过将 disabled 属性的值设置为空字符串 ("")，我们将 disabled 设置为 true，这会导致按钮被禁用。

Link to MDN

解决方案

• 我的意思是 XHTML Strict 是对的disabled="disabled"，
• 并且在 HTML5 中只是 禁用，如
• 在 javascript 中，I 将值设置为 true via e.disabled = true;
  或到 "" via setAttribute("disabled", "");

在 Chrome 中测试

var f = document.querySelectorAll( "label.disabled input" );
for( var i = 0; i < f.length; i++ )
{
    // Reference
    var e = f[ i ];

    // Actions
    e.setAttribute( "disabled", false|null|undefined|""|0|"disabled" );
    /*
        <input disabled="false"|"null"|"undefined"|empty|"0"|"disabled">
        e.getAttribute( "disabled" ) === "false"|"null"|"undefined"|""|"0"|"disabled"
        e.disabled === true
    */
    
    e.removeAttribute( "disabled" );
    /*
        <input>
        e.getAttribute( "disabled" ) === null
        e.disabled === false
    */

    e.disabled = false|null|undefined|""|0;
    /*
        <input>
        e.getAttribute( "disabled" ) === null|null|null|null|null
        e.disabled === false
    */

    e.disabled = true|" "|"disabled"|1;
    /*
        <input disabled>
        e.getAttribute( "disabled" ) === ""|""|""|""
        e.disabled === true
    */
}