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

141

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?

user342391
quelle

Antworten:

306

$("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 ...

Inkognito
quelle
3
+1 für das Aktualisieren des Textes, damit ich darauf achten kann
Vael Victus
@VaelVictus Nicht so schnell. Es tut mir leid zu sagen, dass sie es ein Jahr nach dem Posten wieder geändert haben ... und ich habe diese Antwort vergessen. Lesen Sie diese Antwort: stackoverflow.com/a/5876747/257493
Incognito
1
Diese Unterscheidung zwischen .prop und .attr zwischen Dokumenten und Nicht-Dokumenten ist unendlich hilfreich, und ich habe den Kontext noch nie so prägnant gesehen. Sehr geschätzt!
Unübertroffene
51

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");
Mircea Stanciu
quelle
2
Als Hinweis für Leute, die von Google hierher kommen, direkt von jQuery :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method
Erenor Paz
16

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);
iConnor
quelle
Was ist mit $element.eq(0)[0].disabled = true;? :-P
qwertynl
1
Ja, das ist für mich zu weit fortgeschritten, ich gehe nicht so weit, um die Leistung zu verbessern.
iConnor
+1. Obwohl es ein bisschen redundant ist. Wenn Sie es mit einer NodeList / einem Array von Elementen zu tun haben, ist es dumm, sie anhand des Index so auszuwählen. Iteration oder einfach nur das Element auszuwählen, das Sie benötigen, ist sinnvoller.
13
$(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.


quelle
1
Vielen Dank, dass Sie eine Lösung bereitgestellt haben, für die jQuery nicht erforderlich ist.
Elias Zamaria
12

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';
          });
});
user113716
quelle
5

Verwenden Sie einfach die attr()Methode von jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');
Gabe
quelle
3
und entfernen Sie deaktivierten Zustand mit.removeAttr('disabled');
ruhong
2

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

Viktor
quelle