在 HTML 中显式设置 disabled="false" 不起作用

Question

我想 在 html 文件 中明确设置一个启用的按钮。原因是我的代码稍后将按钮切换为禁用，如果代码崩溃，我可能会看到按钮被禁用。

我可以禁用按钮

$("#btn").attr("disabled","true")

但随后是一个包含以下内容的 html：

 <button id="btn" disabled="false">I want to be enabled!</button>

仍将按钮显示为已禁用。检查员显示：

 <button id="btn" disabled="">I want to be enabled!</button>

我知道我能做到

$("#btn").removeAttr("disabled")

或类似的，但对 html 中的许多元素执行此操作并不方便。

原文由 aless80 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

令人惊讶的是，HTML 不对布尔属性使用布尔值。

在 HTML 中，布尔属性通过仅添加属性名称或（尤其是在 XHTML 中）使用属性名称作为其值来指定。

 <input type="checkbox" disabled>                 <!-- HTML -->
<input type="checkbox" disabled />               <!-- Also HTML -->
<input type="checkbox" disabled="disabled" />    <!-- XHTML and HTML -->

这记录在 HTML 规范中： http ://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

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

布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

---

更令人困惑的是，在 DOM 中，这些布尔属性 是 用布尔值指定的，例如：

 /** @type HTMLInputElement */
const inputElement = document.createElement('input');

inputElement.disabled = true; // <-- The DOM *does* use a proper boolean value here.
console.log( inputElement.disabled ); // Prints "true"

inputElement.disabled = false;
console.log( inputElement.disabled ); // Prints "false"

…添加 更多 的混乱 - 由于 JavaScript 的 虚假性- 将字符串值与属性一起使用将不会像您期望的那样工作：

 inputElement.disabled = 'true';
console.log( inputElement.disabled ); // Prints "true"

inputElement.disabled = 'false';
console.log( inputElement.disabled ); // *Still* prints "true"

（这是因为 JavaScript 字符串 'false' 没有 类型强制 转换为 JavaScript 布尔值 false ）。

---

Also, some HTML attributes do have true and false as possible values, such as contentEditable (which also has inherit as a third option ), 还要考虑 <form autocomplete=""> 可以是 on 和 off （以及许多其他值），这也可能会让一些人失望。我认为一些遗留的（Internet Explorer 4.0 时代）扩展，如 <object> 和 <applet> 可能有布尔值属性，而且它们的子属性中肯定有布尔值 <param value=""> ,def-63-在这一点上，这只是一个历史的好奇心）。

原文由 Dai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将来，可以帮助某人。

 selectLanguage.onchange = function() {
    var value = selectLanguage.value;
    if (value != '') {
        submitLanguage.removeAttr('disabled');
    } else {
        submitLanguage.attr('disabled', 'disabled');
    }
    // submitLanguage.attr('enabled', 'enabled');
}

原文由 Marcelo 发布，翻译遵循 CC BY-SA 4.0 许可协议