web-dev-qa-db-fra.com

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

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")
});


Ceci me montre true puis false mais rien ne change pour les entrées:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});
javascriptjquerydisabled-input
354
fatiDev

Toujours utilisez la méthode prop() pour activer ou désactiver des éléments lors de l'utilisation de jQuery (voir pourquoi ci-dessous).

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() alors que vous pourriez utiliser attr()/removeAttr() pour le faire?

prop() devrait être utilisé pour obtenir ou définir des propriétés (telles que autoplay, checked, disabled et required parmi autres).

En utilisant removeAttr(), vous supprimez complètement l'attribut disabled lui-même - alors que prop() ne fait que définir la valeur booléenne sous-jacente de la propriété sur false.

Même si ce que vous voulez faire peut être utilisé avec attr()/removeAttr(), cela ne signifie pas que doit être effectué (et peut comportement étrange/problématique, comme dans ce cas).

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

"La différence entre attributs et propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6, la méthode .attr() tenait parfois compte des valeurs de propriété lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. À partir de jQuery 1.6, la méthode .prop() fournit un moyen de récupérer explicitement les valeurs de propriété, alors que .attr() récupère 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é. La propriété value des éléments d’entrée, la propriété disabled des entrées et des boutons ou la checked La méthode .prop() doit être utilisée pour définir disabled et checked à la place de la méthode .attr(). La méthode .val() doit être utilisée pour obtenir et définir value. "

741
lifetimes
<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/

41
Muthu Kumaran

supprimer l'utilisation de l'attribut désactivé,

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

et d'ajouter l'utilisation d'attribut désactivé,

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

Prendre plaisir :)

35
Umesh Patil

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
 });
16
Dhamu

Je pense que vous essayez de basculer l'état désactivé, dans ce cas, vous devriez utiliser ceci (à partir de cette question ):

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

Voici un violon qui fonctionne.

9
nicosantangelo

Pensé cela, 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);   
        }
    }
 );
});
3
Er.gaurav soni

C'est le seul code qui a fonctionné pour moi:

element.removeProp('disabled')

Notez que c'est removeProp et non removeAttr.

J'utilise jQuery 2.1.3 ici.

3
Leniel Maccaferri

2018, sans JQuery

Je sais que la question concerne JQuery: cette réponse est juste pour votre information.

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