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


Réponses:


3810

jQuery 1.6+

Pour modifier la disabledpropriété, vous devez utiliser la .prop()fonction.

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

jQuery 1.5 et inférieur

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

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 seul élément:

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

L'avantage de l'utilisation des méthodes .prop()ou .attr()est que vous pouvez définir la propriété pour un groupe d'éléments sélectionnés.


Remarque: dans la version 1.6, il existe une .removeProp()méthode 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é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 existe de nombreuses utilisations légitimes de cette méthode, les accessoires booléens sont faits de telle manière que vous devez les définir sur false au lieu de les "supprimer" comme leurs homologues "attribut" dans 1.5


9
Soit dit en passant, rappelez-vous que si vous souhaitez désactiver TOUS les contrôles d'entrée de formulaire - y compris. cases à cocher, radios, zones de texte, etc. - vous devez sélectionner ':input', pas seulement 'input'. Ce dernier sélectionne uniquement les éléments <input> réels.
Cornel Masson

35
@CornelMasson input,textarea,select,buttonest un peu mieux à utiliser que :input- :inputcar un sélecteur est assez inefficace car il doit sélectionner *puis boucler sur chaque élément et filtrer par variable - si vous passez directement les 4 sélecteurs de variable, c'est BEAUCOUP plus rapide. De plus, ce :inputn'est pas un sélecteur CSS standard, donc tous les gains de performances possibles querySelectorAllsont perdus
gnarf

3
Cela empêche-t-il simplement l'utilisateur d'y accéder ou le supprime-t-il réellement de la demande Web?
OneChillDude

4
L'utilisation de la .removeProp("disabled")cause le problème de "la suppression complète des propriétés et leur non-ajout", comme l'a souligné @ThomasDavidBaker, dans le cas de certains navigateurs comme Chrome, alors que cela fonctionnait bien sur certains comme Firefox. Nous devons vraiment faire attention ici. Utilisez toujours à la .prop("disabled",false)place
Sandeepan Nath

6
Ni .prop ni .attr ne suffisent pour désactiver les éléments d'ancrage; .prop ne grise même pas le «contrôle» (.attr le fait, mais le href est toujours actif). Vous devez également ajouter un gestionnaire d'événements Click qui appelle preventDefault ().
Jeff Lowery du

61

Juste pour le plaisir de nouvelles conventions et de le rendre adaptable à l'avenir (sauf si 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');   
});

12
Jikes! Pourquoi $(document).on('event_name', '#your_id', function() {...})au lieu de $('#your_id').on('event_name', function() {...}). Comme décrit dans la documentation jQuery .on (), le premier utilise la délégation et écoute tous les event_name événements qui remontent documentet vérifie leur correspondance #your_id. Ce dernier écoute $('#your_id')uniquement les événements et cela évolue mieux.
Peter V. Mørch

23
Le premier fonctionne pour les éléments insérés dans le DOM à tout moment, le second uniquement pour ceux qui existent à ce moment-là.
crazymykl

1
@crazymykl Correct mais vous ne devez pas ajouter d'éléments avec un identifiant déjà présent sur votre page.
SepehrM

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

Parfois, vous devez désactiver / activer l'élément de formulaire comme l'entrée ou la zone de texte. Jquery vous aide à le faire facilement en définissant l'attribut désactivé sur "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', '');

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


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

ou

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

2
Bien sûr, la question posée pour jQuery et cela change l'état en JavaScript simple, mais cela fonctionne.
basic6

1
Cela change l'état en JavaScript, mais il utilise toujours un sélecteur jQuery pour obtenir la première entrée.
cjsimon

3
Mais je ne pense pas que nous faisons une encyclopédie de jquery ici, si une réponse fonctionne, c'est bien
Sajjad Shirazy

8

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();

3
Bien que l'encapsulation de la fonctionnalité soit pratique, vous devriez avoir utilisé propet non attr avec la disabledpropriété pour qu'elle fonctionne correctement (en supposant que jQuery 1.6 ou supérieur).
Fin du codage

1
@TrueBlueAussie Quels sont les inconvénients de l'utilisation attr? J'utilise le code ci-dessus dans certains projets et pour autant que je m'en souvienne, cela fonctionne bien
Nicu Surdu

1
Les exceptions évidentes sont les contrôles avec des propriétés en arrière-plan. Le plus célèbre est la checkedpropriété des cases à cocher. L'utilisation attrne donnera pas le même résultat.
Fin du codage

7

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

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

1
merci j'ai la même chose pour la bascule c'est; $ ("input"). prop ('disabled', function (i, v) {return! v;});
Floww

5

Il existe de nombreuses 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 supérieure, utilisez prop () au lieu de attr ().

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

Si vous souhaitez activer un élément, il vous suffit de faire le contraire 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 3

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

Encore une fois, si vous utilisez jQuery 1.7 ou une version supérieure, utilisez prop (), au lieu de attr (). C'est. C'est ainsi que vous activez ou désactivez n'importe quel élément à l'aide de jQuery.


2

Mise à jour pour 2018:

Maintenant, il n'y a plus besoin de jQuery et cela fait longtemps que document.querySelector ou document.querySelectorAll(pour plusieurs éléments) fait 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);

1
la question pose spécifiquement sur jQuery ... mais votre déclaration est également correcte, et vaut la peine de savoir que jQuery n'a plus besoin d'être utilisé pour cela quand il y a plusieurs éléments.
ADyson

2

Vous pouvez utiliser la méthode jQuery prop () pour désactiver ou activer l'élément de formulaire ou contrôler dynamiquement à 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

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

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

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

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

Pour tout type de type d'entrée

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

1
Merci, cela m'a aidé à isoler un nom d'entrée. $("input[name=method]").prop('disabled', true);
Harry Bosh

1

ça marche pour moi

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

0

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

Ensuite, utilisez comme ceci

$('#myElement').disable(true);

0

2018, sans JQuery (ES6)

Désactiver tout input:

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

Désactiver inputavecid="my-input"

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

La question est avec JQuery, c'est juste FYI.



0

Utilisez comme ça,

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

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

-1
<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
De la file d'attente d'examen : puis-je vous demander de bien vouloir ajouter un peu plus de contexte autour de votre réponse. Les réponses uniquement codées sont difficiles à comprendre. Cela aidera le demandeur et les futurs lecteurs à la fois si vous pouvez ajouter plus d'informations dans votre message.
RBT

-1

Dans jQuery Mobile:

Pour désactiver

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

Pour activer

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.