Question Désactiver / activer une entrée avec jQuery?


$input.disabled = true;

ou

$input.disabled = "disabled";

Quelle est la manière standard? Et inversement, comment activer une entrée désactivée?


1910
2017-09-12 05:21


origine


Réponses:


jQuery 1.6+

Pour changer le disabled propriété que vous devriez utiliser le .prop() fonction.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 et ci-dessous

le .prop() la fonction n'existe pas, mais .attr() fait similaire:

Définissez l'attribut désactivé.

$("input").attr('disabled','disabled');

Pour activer à nouveau, la bonne méthode consiste à utiliser .removeAttr()

$("input").removeAttr('disabled');

Dans n'importe quelle version de jQuery

Vous pouvez toujours compter sur l'objet DOM réel et il est probablement un peu plus rapide que les deux autres options si vous ne traitez qu'un seul élément:

// assuming an event handler thus 'this'
this.disabled = true;

L'avantage d'utiliser le .prop() ou .attr() méthodes est que vous pouvez définir la propriété pour un tas d'éléments sélectionnés.


Remarque: Dans 1.6 il y a un .removeProp() méthode qui ressemble beaucoup à removeAttr()mais ça NE DOIT PAS ÊTRE UTILISÉ sur les propriétés natives comme 'disabled'  Extrait de la documentation:

Remarque: N'utilisez pas cette méthode pour supprimer des propriétés natives telles que cochées, désactivées ou sélectionnées. Cela supprimera complètement la propriété et, une fois supprimée, ne pourra plus être ajoutée à l'élément. Utilisez .prop () pour définir ces propriétés sur false à la place.

En fait, je doute qu'il y ait beaucoup d'utilisations légitimes pour cette méthode, les accessoires booléens sont faits de telle sorte que vous devriez les mettre à false au lieu de les "supprimer" comme leurs "attributs" en 1.5


3289
2017-09-12 05:23



Juste pour de nouvelles conventions && rendant adaptable à l'avenir (à moins que les choses changent radicalement avec ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

et

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

51
2017-07-18 11:51



    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Parfois, vous devez désactiver / activer l'élément de formulaire comme input ou textarea. Jquery vous aide à faire cela facilement en mettant l'attribut désactivé à "désactivé". Par exemple:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Pour activer l'élément désactivé, vous devez supprimer l'attribut "désactivé" de cet élément ou vider sa chaîne. Par exemple:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

référer :http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


25
2018-04-07 10:27



$("input")[0].disabled = true;

ou

$("input")[0].disabled = false;

12
2017-09-06 14:53



Vous pouvez mettre ceci quelque part global dans votre code:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Et puis vous pouvez écrire des trucs comme:

$(".myInputs").enable();
$("#otherInput").disable();

7
2017-10-18 13:42



Si vous voulez juste inverser l'état actuel (comme un comportement de bouton à bascule):

$("input").prop('disabled', ! $("input").prop('disabled') );

4
2017-09-12 16:28



Mise à jour pour 2018:

Maintenant, il n'y a plus besoin de jQuery et ça fait longtemps document.querySelector  ou document.querySelectorAll (pour plusieurs éléments) font presque exactement le même travail que $, plus des éléments plus explicites getElementById, getElementsByClassName, getElementsByTagName

Désactiver un champ de la classe "input-checkbox"

document.querySelector('.input-checkbox').disabled = true;

ou plusieurs éléments

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

2
2018-02-11 18:29



Vous pouvez utiliser la méthode jQuery prop () pour désactiver ou activer dynamiquement un élément de formulaire ou un contrôle à l'aide de jQuery. La méthode prop () nécessite jQuery 1.6 et supérieur.

Exemple:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

1
2017-08-02 10:26