javascript supprime l'attribut «désactivé» de l'entrée html

101

Comment puis-je supprimer l'attribut "désactivé" d'une entrée HTML à l'aide de javascript?

<input id="edit" disabled>

sur onClick, je veux que ma balise d'entrée ne soit pas constituée d'un attribut "désactivé".

javascript input attributes Jam Ville
la source
duplication possible de Comment désactiver un bouton d'envoi lorsque la case est décochée? dupliquer car cette question explique comment basculer, donc comment activer et désactiver comme demandé ici.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Réponses:

199

Définissez la disabledpropriété de l'élément sur false:

document.getElementById('my-input-id').disabled = false;

Si vous utilisez jQuery, l'équivalent serait:

$('#my-input-id').prop('disabled', false);

Pour plusieurs champs de saisie, vous pouvez y accéder par classe à la place:

var inputs = document.getElementsByClassName('my-input-class');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false;
}

Où documentpourrait être remplacé par un formulaire, par exemple, pour ne trouver que les éléments à l'intérieur de ce formulaire. Vous pouvez également utiliser getElementsByTagName('input')pour obtenir tous les éléments d'entrée. Dans votre foritération, vous devrez ensuite vérifier cela inputs[i].type == 'text'.

David Hedlund
la source
1
oui ça marche, mais j'ai eu beaucoup d'entrées pour faire la même chose. Y a-t-il un raccourci pour cela? est-ce possible ('id1', 'id2', 'id3')?
Jam Ville
1
Oui cela fonctionne! Merci. au fait, il y a une faute de frappe chez geElementsBy. Je pensais que ça ne marcherait pas :)
Jam Ville
34

Pourquoi ne pas simplement supprimer cet attribut?

  1. vanille JS: elem.removeAttribute('disabled')
  2. jQuery: elem.removeAttr('disabled')
Dragos Rusu
la source
1
jQuery("#success").removeAttr("disabled");- cela fonctionne pour moi, merci!
aftamat4ik
vanilla js, removeAttribute n'est pas pris en charge dans IE.
MarCrazyness
@MarCrazyness removeAttributesemble être pris en charge dans IE11. Il est marqué comme unknownsur puis-je utiliser, alors j'ai juste ouvert IE et vérifié si cela fonctionne. Cela fait.
Artur
2

Pour définir le disabledsur false à l'aide de la namepropriété de l'entrée:

document.myForm.myInputName.disabled = false;
Henry Hedden
la source
1

La meilleure réponse est simplement de supprimer l'attribut

element.removeAttribute("disabled");
Harshit Nigam
la source
dans Firefox, comme nowadys (2020), l'attribut désactivé est actif bien qu'il soit défini sur false. Firefox recherche simplement l'attribut lui-même. la meilleure solution est donc de l'ajouter ou de le supprimer pour Firefox, et cela fonctionne bien sûr pour tous les principaux navigateurs.
Raffael Meier le
0 
method 1 <input type="text" onclick="this.disabled=false;" disabled>
<hr>
method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
<hr>
method 3 <input type="text" onclick="this.removeAttribute('readonly');" readonly>

le code des réponses précédentes ne semble pas fonctionner en mode en ligne, mais il existe une solution de contournement: méthode 3.

voir la démo https://jsfiddle.net/eliz82/xqzccdfg/

crisc82
la source
Ces deux ne fonctionnent pas pour moi. method 1 <input type="text" onclick="this.disabled=false;" disabled> <hr> method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
Ambal Mani
1
Vous avez voté contre cela simplement parce que vous ne savez pas comment lire une réponse? La méthode 1 provient de la réponse de David Hedlund, la méthode 2 de la réponse de Dragos Rusu. Une fois qu'un élément est désactivé, "onclick" sur cet élément spécifique ne fonctionnera plus en mode inline (je n'ai pas testé le mode js externe). La seule façon de simuler "désactivé" est une petite solution de contournement en utilisant l'attribut readonly et quelques css. OU créez un élément externe "onclick" comme un bouton qui permettra la saisie en utilisant les méthodes 1 et 2 (cela fonctionnera bien sûr).
crisc82