web-dev-qa-db-fra.com

Ajouter un attribut désactivé à l'élément d'entrée en utilisant Javascript

J'ai un champ de saisie et je souhaite le désactiver et le masquer en même temps pour éviter les problèmes lors du portage de mon formulaire.

Jusqu'à présent, j'ai le code suivant pour masquer ma saisie:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

C'est l'entrée qui est cachée à la suite:

<input class="longboxsmall" type="text" />

Comment puis-je également ajouter l'attribut disabled à l'entrée?

javascriptjqueryinputonclick
121
user342391

$("input").attr("disabled", true); à partir de ... Je n'en sais plus.

Nous sommes en décembre 2013 et je ne sais vraiment pas quoi vous dire.

D'abord, il s'agissait toujours de .attr(), puis de .prop(). Je suis donc revenu ici pour mettre à jour la réponse et la rendre plus précise.

Puis, un an plus tard, jQuery a de nouveau changé d’avis et je ne veux même pas en tenir compte.

Longue histoire courte, à partir de maintenant, c'est la meilleure réponse: "vous pouvez utiliser les deux ... mais ça dépend."

Vous devriez plutôt lire cette réponse: https://stackoverflow.com/a/5876747/25749

Et leurs notes de version pour ce changement sont incluses ici:

Ni .attr () ni .prop () ne doivent être utilisés pour obtenir/définir une valeur. Utilisez la méthode .val () à la place (bien que l'utilisation de .attr ("value", "somevalue") continue de fonctionner, comme c'était le cas avant la version 1.6).

Résumé de l'utilisation préférée

La méthode .prop () doit être utilisée pour les attributs/propriétés booléens et pour les propriétés qui n'existent pas en HTML (telles que window.location). Tous les autres attributs (ceux que vous pouvez voir dans le HTML) peuvent et devraient continuer à être manipulés avec la méthode .attr ().

Ou en d'autres termes:

".prop = trucs non documentés"

".attr" = documents

... ...

Pouvons-nous tous apprendre une leçon sur la stabilité de l'API ...

270
Incognito

Code de travail de mes sources:

MONDE HTML

<select name="select_from" disabled>...</select>

JS WORLD

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");
44
Mircea Stanciu

Si vous utilisez jQuery, il existe plusieurs façons de définir l'attribut désactivé.

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);
15
iConnor

Vous pouvez obtenir l'élément DOM et définir directement la propriété disabled.

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

ou s'il y en a plusieurs, vous pouvez utiliser each() pour les définir tous:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});
12
user113716
$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

Toutes les solutions ci-dessus sont des solutions parfaitement valables. Choisissez celui qui correspond le mieux à vos besoins.

10
user1596138

Utilisez simplement la méthode attr() de jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');
5
Gabe