Fügen Sie dem Eingabeelement mit Javascript ein deaktiviertes Attribut hinzu

Ich habe ein Eingabefeld und möchte, dass es deaktiviert und gleichzeitig ausgeblendet wird, um Probleme beim Portieren meines Formulars zu vermeiden.

Bisher habe ich den folgenden Code, um meine Eingabe zu verbergen:

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

Dies ist die Eingabe, die dadurch ausgeblendet wird:

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

Wie kann ich der Eingabe auch das deaktivierte Attribut hinzufügen?

$("input").attr("disabled", true); ab ... ich weiß nicht mehr.

Es ist Dezember 2013 und ich habe wirklich keine Ahnung, was ich dir sagen soll.

Zuerst war es immer .attr(), dann war es immer .prop(), also kam ich hierher zurück, aktualisierte die Antwort und machte sie genauer.

Dann, ein Jahr später, änderte jQuery erneut seine Meinung und ich möchte nicht einmal den Überblick behalten.

Kurz gesagt, ab sofort ist dies die beste Antwort: "Sie können beide verwenden ... aber es kommt darauf an."

Sie sollten stattdessen diese Antwort lesen: https://stackoverflow.com/a/5876747/257493

Und ihre Versionshinweise für diese Änderung sind hier enthalten:

Weder .attr () noch .prop () sollten zum Abrufen / Festlegen von Werten verwendet werden. Verwenden Sie stattdessen die Methode .val () (obwohl die Verwendung von .attr ("value", "somevalue") wie vor 1.6 weiterhin funktioniert).

Zusammenfassung der bevorzugten Verwendung

Die .prop () -Methode sollte für boolesche Attribute / Eigenschaften und für Eigenschaften verwendet werden, die in HTML nicht vorhanden sind (z. B. window.location). Alle anderen Attribute (die Sie im HTML-Code sehen können) können und sollten weiterhin mit der Methode .attr () bearbeitet werden.

Oder mit anderen Worten:

".prop = Nicht-Dokument-Zeug"

".attr" = Dokumentmaterial

... ...

Mögen wir alle hier eine Lektion über API-Stabilität lernen ...

Arbeitscode aus meinen Quellen:

HTML WORLD

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

Wenn Sie jQuery verwenden, gibt es verschiedene Möglichkeiten, das Attribut deaktiviert festzulegen.

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

Alle oben genannten sind absolut gültige Lösungen. Wählen Sie diejenige, die Ihren Anforderungen am besten entspricht.

Sie können das DOM-Element abrufen und die Eigenschaft disabled direkt festlegen.

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

oder wenn es mehr als eine gibt, können Sie each()alle festlegen:

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

Verwenden Sie einfach die attr()Methode von jQuery

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

Da die Frage lautete, wie dies mit JS gemacht werden soll, stelle ich eine Vanilla JS-Implementierung bereit.

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";
}