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?
15 réponses
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
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');
});
// 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
$("input")[0].disabled = true;
ou
$("input")[0].disabled = false;
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();
si vous voulez simplement inverser l'état actuel (comme un comportement de bouton à bascule):
$("input").prop('disabled', ! $("input").prop('disabled') );
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);
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>
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.
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.
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);
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.
<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>
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');
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);