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

$input.disabled = true;

ou

$input.disabled = "disabled";

Quelle est la voie standard? Et, à l'inverse, comment activer une entrée désactivée?

1952
demandé sur John Slegers 2009-09-12 09:21:54
la source

15 ответов

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() fait similaire:

définit l'attribut disabled.

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

pour activer à nouveau, la méthode appropriée est à utiliser .removeAttr()

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

dans toute 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 avez affaire à un seul é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 tas d'articles sélectionnés.


Note: en 1.6 il y a une .removeProp() méthode qui sonne beaucoup comme removeAttr() , mais il ne doit pas être utilisé sur les propriétés natives comme 'disabled' extrait de la documentation:

Note: N'utilisez pas cette méthode pour supprimer des propriétés natives telles que vérifiées, désactivées ou sélectionnées. Ceci enlèvera la propriété complètement et, une fois enlevé, ne peut pas être ajouté à nouveau à l'élément. Utiliser. prop() pour définir ces propriétés à 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 manière que vous devriez les mettre à faux au lieu de les "enlever" comme leurs homologues "attribut" dans 1.5

3359
répondu gnarf 2014-06-26 00:18:33
la source

Juste pour le plaisir de nouvelles conventions && s'adapte à 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');   
});
53
répondu geekbuntu 2013-05-29 16:43:32
la source
    // 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 à le faire facilement en définissant l'attribut disabled à "disabled". Par exemple:

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

pour activer l'élément disabled, vous devez supprimer l'attribut" disabled " de cet élément ou vider sa chaîne. For E. g:

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

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

voir : http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

26
répondu Harini Sekar 2014-04-07 14:27:16
la source
$("input")[0].disabled = true;

ou

$("input")[0].disabled = false;
12
répondu Sajjad Shirazy 2014-09-11 12:33:11
la source

vous pouvez le mettre 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 ensuite vous pouvez écrire des trucs comme:

$(".myInputs").enable();
$("#otherInput").disable();
7
répondu Nicu Surdu 2014-10-27 02:35:01
la source

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

$("input").prop('disabled', ! $("input").prop('disabled') );
5
répondu daVe 2014-09-12 20:28:25
la source

mise à jour pour 2018:

maintenant il n'y a pas besoin de jQuery et ça fait un moment que document.querySelector ou document.querySelectorAll (pour les éléments multiples) font presque exactement le même travail que$, plus les plus explicites getElementById , getElementsByClassName , getElementsByTagName

désactivant un champ de la classe" entrée-case à cocher

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

ou plusieurs éléments

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
2
répondu Pawel 2018-02-11 21:29:49
la source

vous pouvez utiliser la méthode jQuery prop() pour désactiver ou activer l'élément de forme ou le contrôle dynamiquement en utilisant jQuery. La méthode prop() exige jQuery 1.6 et au-dessus.

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
répondu SPARTAN 2018-08-02 13:26:25
la source

il y a plusieurs façons de les utiliser vous pouvez activer / désactiver n'importe quel élément :

approche 1

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

approche 2

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

si vous utilisez jQuery 1.7 ou une version plus récente, utilisez prop (), au lieu d'attr().

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

Si vous souhaitez activer n'importe quel élément, alors vous avez juste à faire le contraire de ce tu l'as fait pour le rendre désactivable. Cependant jQuery fournit une autre façon de supprimer tout attribut.

approche 1

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

approche 2

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

approche 3

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

encore une fois, si vous utilisez jQuery 1.7 ou une version plus récente, utilisez prop (), au lieu d'attr(). C'est est. Voici comment activer ou de désactiver toutes élément à l'aide de jQuery.

2
répondu wild coder 2018-08-02 13:59:38
la source

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
répondu Tomer Ben David 2018-09-21 10:04:29
la source

j'ai utilisé la réponse @gnarf et l'ai ajoutée comme fonction

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

puis utiliser comme ceci

$('#myElement').disable(true);
0
répondu Imants Volkovs 2017-11-16 13:24:59
la source

2018, sans JQuery (ES6)

tout Désactiver 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 info.

0
répondu rap-2-h 2018-06-04 16:52:45
la source
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>
-1
répondu 2015-09-26 13:22:38
la source

In jQuery Mobile:

pour handicapés

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

pour enable

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
-1
répondu Atif Hussain 2018-01-08 17:27:23
la source

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

dans le cas d'un type d'entrée spécifique ( ex. Type de texte entrée )

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

pour tout type de type d'entrée

$("input").attr('disabled', true);
-1
répondu Hasib Kamal 2018-09-22 10:02:50
la source

Autres questions sur javascript jquery html-input