web-dev-qa-db-fra.com

Définir explicitement désactivé = "faux" dans le HTML ne fonctionne pas

Je voudrais définir explicitement un bouton comme activé dans le fichier html. La raison en est que mon code bascule plus tard le bouton sur désactivé et si le code se bloque ou alors je pourrais voir le bouton désactivé.

Je peux désactiver le bouton avec

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

mais ensuite un html contenant:

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

affiche toujours le bouton comme désactivé. L'inspecteur montre:

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

Je sais que je peux faire

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

ou similaire, mais il n'est pas pratique de le faire pour de nombreux éléments dans le html.

htmldisabled-control
21
aless80

Étonnamment, le HTML n'utilise pas de valeurs booléennes pour les attributs booléens.

En HTML, les attributs booléens sont spécifiés soit en ajoutant simplement le nom de l'attribut, soit (en particulier en XHTML) en utilisant le nom de l'attribut comme valeur.

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

Ceci est documenté dans la spécification HTML: http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

Un certain nombre d'attributs sont des attributs booléens. La présence d'un attribut booléen sur un élément représente la vraie valeur et l'absence de l'attribut représente la fausse valeur.

Les valeurs "true" et "false" ne sont pas autorisées sur les attributs booléens. Pour représenter une fausse valeur, l'attribut doit être complètement omis.

33
Dai

À l'avenir, peut aider quelqu'un.

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

Si vous utilisez AngularJS, essayez ng-disabled au lieu. Dans ce cas, vous pouvez utiliser des trucs comme:

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

et cela fonctionne comme prévu ....

3
Daniel Perník

Je sais que c'est un vieux sujet mais comme il n'y a pas de réponse marquée, cela aide-t-il? Cela répond à la question explicitement marquée comme activée.

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

Moi aussi, j'étudie cela pour pouvoir activer un bouton lors de la validation. J'espère que ça aidera quelqu'un.

3
Adsy2010