web-dev-qa-db-fra.com

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

$input.disabled = true;

ou

$input.disabled = "disabled";

Quel est le moyen standard? Et inversement, comment activer une entrée désactivée?

javascriptjqueryhtml-input
2165
omg

jQuery 1.6+

Pour changer la propriété disabled, vous devez utiliser la fonction .prop() .

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

jQuery 1.5 et inférieur

La fonction .prop() n'existe pas, mais .attr() a le même effet:

Définissez l'attribut désactivé.

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

Pour réactiver, la méthode appropriée consiste à utiliser .removeAttr()

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

Dans n'importe quelle version de jQuery

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

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

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

Remarque: En 1.6, il existe une méthode .removeProp() qui ressemble beaucoup à removeAttr(), mais elle NE DEVRAIT PAS ÊTRE UTILISÉE sur des 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é, désactivé ou sélectionné. Cela supprimera complètement la propriété et, une fois supprimé, ne pourra plus être ajouté à l'élément. Utilisez .prop () pour définir ces propriétés sur false à la place.

En fait, je doute qu’il existe de nombreuses utilisations légitimes pour cette méthode. Les accessoires booléens sont configurés de manière à ce qu'ils soient définis sur false au lieu de les "supprimer" comme leurs équivalents "attribut" de la version 1.5.

3654
gnarf

Juste pour le plaisir de nouvelles conventions et de le rendre adaptable à l'avenir (à moins que les choses ne 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');   
});
55
geekbuntu
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Parfois, vous devez désactiver/activer l'élément de formulaire, tel que input ou textarea. JQuery vous aide à rendre cela facilement avec la définition de l'attribut disabled à "disabled". Pour exemple:

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

Pour activer l'élément désactivé, vous devez supprimer l'attribut "disabled" 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', '');

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

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

ou

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

Vous pouvez mettre ceci quelque part de manière globale 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 choses comme:

$(".myInputs").enable();
$("#otherInput").disable();
8
Nicu Surdu

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

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

Vous pouvez activer/désactiver n’importe quel élément de plusieurs manières :

approche 1

$("#txtName").attr("disabled", true);

approche 2

$("#txtName").attr("disabled", "disabled");

Si vous utilisez jQuery version 1.7 ou ultérieure, utilisez prop (), au lieu de attr ().

$("#txtName").prop("disabled", "disabled");

Si vous souhaitez activer n'importe quel élément, il vous suffit de faire l'inverse de ce que vous avez fait pour le désactiver. Cependant, jQuery fournit un autre moyen de supprimer tout attribut.

approche 1

$("#txtName").attr("disabled", false);

approche 2

$("#txtName").attr("disabled", "");

approche

$("#txtName").removeAttr("disabled");

Encore une fois, si vous utilisez jQuery version 1.7 ou ultérieure, utilisez prop (), au lieu de attr (). C'est. C’est ainsi que vous activez ou désactivez tous les éléments à l’aide de jQuery.

4
wild coder

Vous pouvez utiliser la méthode jQuery prop () pour désactiver ou activer un élément de formulaire ou un contrôle dynamique à l'aide de jQuery. La méthode prop () requiert 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>
2
SPARTAN

Mise à jour pour 2018:

Maintenant, jQuery n'est plus nécessaire et cela fait un moment que document.querySelector ou document.querySelectorAll (pour plusieurs éléments) effectue presque exactement le même travail que $, plus des tâches plus explicites getElementById, getElementsByClassName, getElementsByTagName

Désactivation d'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
Pawel

ça marche pour moi

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
1
learnkevin

Désactiver:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Activer:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
1
Tomer Ben David

Utilisez comme ça,

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

    $( "#id" ).prop( "disabled", false );
0
Abdus Salam Azad

Désactiver true pour le type d'entrée:

Dans le cas d'un type d'entrée spécifique ( Ex. Entrée de type de texte )

$("input[type=text]").attr('disabled', true);

Pour tout type de type d'entrée

$("input").attr('disabled', true);
0
Hasib Kamal

J'ai utilisé @gnarf answer et l'ai ajouté en tant que fonction

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Alors utilise comme ça

$('#myElement').disable(true);
0
Imants Volkovs

2018, sans JQuery (ES6)

Désactiver tout input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Désactiver input avec id="my-input"

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

La question est avec JQuery, c'est juste pour votre information.

0
rap-2-h