Ajouter un attribut désactivé à l'élément d'entrée à l'aide de Javascript

J'ai une zone de saisie et je veux qu'elle soit désactivée et en même temps la cacher pour éviter des problèmes lors du portage de mon formulaire.

Jusqu'à présent, j'ai le code suivant pour masquer mon entrée:

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

C'est l'entrée qui est masquée en conséquence:

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

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

$("input").attr("disabled", true); depuis ... je ne sais plus.

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

D'abord c'était toujours .attr(), puis ça l'était toujours .prop(), alors je suis 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 garder une trace.

Bref, pour le moment, c'est la meilleure réponse: "vous pouvez utiliser les deux ... mais cela dépend."

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

Et leurs notes de publication 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 avant 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 (comme window.location). Tous les autres attributs (ceux que vous pouvez voir dans le html) peuvent et doivent continuer à être manipulés avec la méthode .attr ().

Ou en d'autres termes:

".prop = trucs non documentaires"

".attr" = trucs de document

... ...

Puissions-nous tous apprendre ici une leçon sur la stabilité des API ...

Code de travail de mes sources:

MONDE HTML

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

MONDE JS

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

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



//remove it
from.removeAttr("disabled");

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

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

Tous ces éléments sont des solutions parfaitement valables. Choisissez celui qui correspond le mieux à vos besoins.

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 plus d'un, vous pouvez utiliser each()pour tous les définir:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

Utilisez simplement la attr()méthode de jQuery

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

Puisque la question demandait comment faire cela avec JS, je propose une implémentation JS vanille.

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}