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

$input.disabled = true;

ou

$input.disabled = "disabled";

Quelle est la méthode standard? Et, inversement, comment activez-vous une entrée désactivée?

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

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

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

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

ou

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

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

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

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

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.

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

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>

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.

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

ça marche pour moi

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

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

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.

Approche 4 (il s'agit de l'extension de la réponse du codeur sauvage )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Utilisez comme ça,

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

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

<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>

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