$input.disabled = true;
ou
$input.disabled = "disabled";
Quelle est la méthode standard? Et, inversement, comment activez-vous une entrée désactivée?
$input.disabled = true;
ou
$input.disabled = "disabled";
Quelle est la méthode standard? Et, inversement, comment activez-vous une entrée désactivée?
Réponses:
Pour modifier la disabled
propriété, vous devez utiliser la .prop()
fonction.
$("input").prop('disabled', true);
$("input").prop('disabled', false);
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');
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
':input'
, pas seulement 'input'
. Ce dernier sélectionne uniquement les éléments <input> réels.
input,textarea,select,button
est un peu mieux à utiliser que :input
- :input
car 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 :input
n'est pas un sélecteur CSS standard, donc tous les gains de performances possibles querySelectorAll
sont perdus
.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
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');
});
$(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 document
et vérifie leur correspondance #your_id
. Ce dernier écoute $('#your_id')
uniquement les événements et cela évolue mieux.
// 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();
prop
et non attr
avec la disabled
propriété pour qu'elle fonctionne correctement (en supposant que jQuery 1.6 ou supérieur).
attr
? J'utilise le code ci-dessus dans certains projets et pour autant que je m'en souvienne, cela fonctionne bien
checked
propriété des cases à cocher. L'utilisation attr
ne donnera pas le même résultat.
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);
$("input[name=method]").prop('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);
Approche 4 (il s'agit de l'extension de la réponse du codeur sauvage )
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:
$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');