Comment supprimer l'attribut «désactivé» à l'aide de jQuery?

394

Je dois d'abord désactiver les entrées puis cliquer sur un lien pour les activer.

C'est ce que j'ai essayé jusqu'à présent, mais cela ne fonctionne pas.

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').removeAttr("disabled")
});


Cela me montre trueet puis falserien ne change pour les entrées:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});
fatiDev
la source
2
Je ne vois pas ton problème. Que demandez-vous?
nicosantangelo
Donc quelle est la question? je veux dire à quel problème vous êtes confronté
Satya Teja
7
Utilisez prop () - .prop ('désactivé', faux)
Jay Blanchard
Si votre problème est résolu, veuillez cocher la réponse (réelle) acceptée pour que les autres sachent ...
Dhamu
le problème est qu'il n'est pas désactivé après le clic
fatiDev

Réponses:

817

Utilisez toujours la prop()méthode pour activer ou désactiver des éléments lorsque vous utilisez jQuery (voir ci-dessous pour savoir pourquoi).

Dans votre cas, ce serait:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

Exemple jsFiddle ici.


Pourquoi utiliser prop()quand vous pourriez utiliser attr()/ removeAttr()pour faire cela?

Au fond, prop()devrait être utilisé lors de l' obtention ou la mise en propriétés ( par exemple autoplay, checked, disabledet requiredentre autres).

En utilisant removeAttr(), vous supprimez complètement l' disabledattribut lui-même - tout en prop()définissant simplement la valeur booléenne sous-jacente de la propriété sur false.

Bien que ce que vous voulez faire puisse être fait en utilisant attr()/ removeAttr(), cela ne signifie pas que cela devrait être fait (et peut provoquer un comportement étrange / problématique, comme dans ce cas).

Les extraits suivants (extraits de la documentation jQuery pour prop () ) expliquent ces points plus en détail:

"La différence entre les attributs et les propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6, la .attr()méthode prenait parfois en compte les valeurs des propriétés lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. À partir de jQuery 1.6, la .prop() méthode fournit un moyen de récupérer explicitement valeurs de propriété, tout en .attr()récupérant les attributs. "

"Les propriétés affectent généralement l'état dynamique d'un élément DOM sans modifier l'attribut HTML sérialisé. Les exemples incluent la value propriété des éléments d'entrée, la disabledpropriété des entrées et des boutons ou la checkedpropriété d'une case à cocher. La .prop()méthode doit être utilisée pour définir disabledet checkedau lieu de la .attr() méthode. La .val()méthode doit être utilisée pour obtenir et définir value. "

dsgriffin
la source
3
Les gens doivent également savoir que le drapeau de vérification sale, qui casse complètement attrvs les propcases à cocher: w3.org/TR/html5/forms.html#concept-input-checked-dirty, sauf pour la magie de contournement interne jQuery.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
19
Hmm, .prop ("désactivé", faux) ne semble pas fonctionner pour moi dans un bouton - laisse l'attribut "désactivé" dans la balise sans valeur.
UpTheCreek
3
@UpTheCreek ne fonctionnait pas aussi pour moi. Mais j'ai découvert qu'il y avait un problème de portée avec la clause «this» (comme d'habitude). Dans le cas spécifique a .prop()été exécuté sur l'élément pointé par this( this.prop("disabled", false), mais étant dans un rappel, il était lié au mauvais élément, j'ai donc dû faire la var that = thissolution de contournement commune . Essayer de jouer avec .apply()/ .call()ne fonctionnait pas bien; je ne sais pas Pourquoi vérifier une fois console.log(this)s'il est réglé sur l'objet souhaité, juste avant d'appelerthis.prop(...)
Kamafeather
3
Je nomme cette réponse en tant que candidat à la conversion dans la section des documents. Clair, complet, bien écrit.
Anne Gunn
4
En utilisant removeAttr (), vous supprimez complètement l'attribut désactivé lui-même - tandis que prop () définit simplement la valeur booléenne sous-jacente de la propriété sur false. Je ne pense pas que ce soit vrai. En HTML, la simple présence de la disabledpropriété désactivera l'élément. Par exemple, le fait de <button disabled="false"></button> ne pas activer le bouton entraîne la suppression de la propriété. En appelant $('button').prop('disabled', false);jQuery supprimera la propriété pour vous, comme je l'ai observé dans ce codepen (inspectez pour voir la suppression de la propriété).
Naftali
42
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

Muthu Kumaran
la source
42

pour supprimer l'utilisation des attributs désactivés,

 $("#elementID").removeAttr('disabled');

et pour ajouter l'utilisation des attributs désactivés,

$("#elementID").prop("disabled", true);

Prendre plaisir :)

Umesh Patil
la source
4
Ou tout simplement element.removeAttribute ('disabled') in vanilla js
Dragos Rusu
16

Utilisez comme ça,

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });
Dhamu
la source
6
Celui-ci fonctionne réellement pour moi. L'hélice («désactivé», faux) n'a étonnamment pas fonctionné.
Stefan
@Stefan même chose ici! Avez-vous découvert pourquoi?
Alexander Suraphel
1
Je sais que c'est un fil ancien mais si quelqu'un a encore du mal avec ça, mon problème était que l'élément était un <a>, sur lequel .prop('disabled', false)ne fonctionne pas. Je l'ai changé en a <button>et ça fonctionne maintenant
Oliver Nagy
3

Pensé que vous pouvez facilement configurer

$(function(){
$("input[name^=radio_share]").click
(
    function()
    {
        if($(this).attr("id")=="radio_share_dependent")
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);   
        }
        else
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);   
        }
    }
 );
});
Er.gaurav soni
la source
3

C'était le seul code qui fonctionnait pour moi:

element.removeProp('disabled')

Notez que c'est le cas removePropet non removeAttr.

J'utilise jQuery 2.1.3ici.

Leniel Maccaferri
la source
12
Dans la documentation jQuery: Important: la méthode .removeProp () ne doit pas être utilisée pour définir ces propriétés sur false. Une fois qu'une propriété native est supprimée, elle ne peut plus être ajoutée. Voir .removeProp () pour plus d'informations.
XanatosLightfiren
2

2018, sans JQuery

Je sais que la question concerne JQuery: cette réponse est juste FYI.

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 
rap-2-h
la source
0

Cette question mentionne spécifiquement jQuery, mais si vous cherchez à accomplir cela sans jQuery, l'équivalent en vanilla JavaScript est:

elem.removeAttribute('disabled');
jdgregson
la source
elem.removeAttr('disabled');travaille pour moi
Cheng Hui Yuan