web-dev-qa-db-ja.com

HTMLでdisabled = "false"を明示的に設定しても機能しません

ボタンを明示的に有効に設定します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の多くの要素に対してそれを行うのは便利ではありません。

htmldisabled-control
21
aless80

驚くべきことに、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」は、ブール属性では許可されていません。偽の値を表すには、属性を完全に省略する必要があります。

33
Dai

将来、誰かを助けることができます。

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

AngularJSを使用している場合は、ng-disabled代わりに。この場合、次のようなものを使用できます。

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

そして、期待通りに動作します。

3
Daniel Perník

私はこれが古いトピックであることを知っていますが、明確な答えがないので、これは役に立ちますか？これは、明示的に有効とマークされた質問に回答します。

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

私も、検証が発生したときにボタンを有効にするために使用するためにこれを調査しています。これが誰かの助けになることを願っています。

3
Adsy2010