在HTML中显式设置disabled=“false”无效

ozxc1zmp  于 2022-12-09  发布在  其他
关注(0)|答案(6)|浏览(601)

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

eoxn13cs

eoxn13cs1#

令人惊讶的是,HTML不使用布尔属性的布尔值。
在HTML中,布尔属性是通过添加属性名来指定的,或者(特别是在XHTML中)通过使用属性名作为其值来指定的。

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

This is documented in the HTML specification: http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
许多属性都是布尔属性。元素上有布尔属性表示真值,没有布尔属性表示假值。
布尔属性中不允许使用值"true"和"false"。若要表示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"

(This是因为JavaScript字符串'false'没有被 * 类型强制 * 为JavaScript布尔值false)。
此外,* 某些 * HTML属性确实具有truefalse作为可能的值,例如contentEditable(也有inherit作为第三个选项),还考虑<form autocomplete="">,它可以是onoff(和许多其它值),这可能也会让一些人犯错。我认为一些遗产(Internet Explorer 4.0时代)像<object><applet>这样的扩展可能有布尔属性,并且在它们的子<param value="">属性中肯定有布尔值,这只是一个历史上的好奇心)。

rkttyhzu

rkttyhzu2#

将来,可以帮到别人。

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

8gsdolmq3#

我知道这是一个老主题,但由于没有标记的答案,这有帮助吗?这确实回答了显式标记为启用的问题。

<button enabled>My Text</button>
<!-- Which also works as: -->
<button enabled="enabled">My Text</button>

我也在调查这个问题,以便在验证发生时启用一个按钮。我希望这对某些人有帮助。

bnl4lu3b

bnl4lu3b4#

如果您使用的是AngularJS,请尝试使用ng-disabled。在这种情况下,您可以使用以下内容:

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

而且它正如预期的那样工作。

qvk1mo1f

qvk1mo1f5#

在2022年,如果您使用EJS或Vue,您应该将其设置为:
EJS:

<div <%=true?'enabled':'disabled'%> ></div>

维:

<div :disabled="someFuncInMethods()"></div>
6yoyoihd

6yoyoihd6#

您必须使用元素.removeAttribute(“disabled”);
谢谢

相关问题