在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中的许多元素这样做是不方便的.

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

许多属性是布尔属性.元素上存在布尔属性表示真值,缺少属性表示false值.

布尔属性不允许使用值"true"和"false".要表示错误值,必须完全省略该属性.

Answer 2

如果您正在使用AngularJS，请尝试ng-disabled改为。在这种情况下，您可以使用以下内容：

ng-disabled="true"
ng-disabled="false"
ng-disabled={{expression}}

它按预期工作......

Answer 3

将来可以帮助别人。

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