jQuery / Methode / .prop() - DOM-Eigenschaften lesen und setzen

jQuerys .prop("Name") liest eine DOM-Eigenschaft des ersten ausgewählten Elements; .prop("Name", Wert) setzt sie bei allen ausgewählten Elementen. Für den aktuellen Auswahlzustand einer Checkbox verwenden Sie .prop("checked"), für ihren deaktivierten Zustand .prop("disabled"). Unterscheiden Sie aktuelle Browsereigenschaften von Attributstrings im HTML.

Aktueller Zustand und HTML-Attribute

Das Document Object Model (DOM) stellt HTML-Dokumente als Knoten und Objekte dar. checked, disabled und selectedIndex sind Eigenschaften dieser Objekte in der .prop()-API. .attr() liest und setzt HTML-Attribute. Derselbe Name bedeutet nicht immer denselben aktuellen Zustand.

<input type="checkbox" checked=""> beginnt angekreuzt. Beim Abwählen wird checked false, während defaultChecked und das Attribut unverändert bleiben. Das checked-Attribut einer Checkbox ist boolesch: Seine Anwesenheit zählt, checked="false" bedeutet daher nicht abgewählt.

Verwenden Sie den String aus .attr("checked") nicht als aktuellen Zustand. Bei checked="" lieferte 3.7.1 hier "checked", 4.0.0 den leeren String "". Ein leerer String ist in JavaScript falschwertig, obwohl die Checkbox angekreuzt sein kann. Lesen Sie den booleschen Wert mit .prop("checked") statt versionsabhängige Attributstrings zu vergleichen.

Vollständiges Zustands- und Ereignisbeispiel

Speichern Sie alles in UTF-8 als prop-demo.html und öffnen Sie die Datei im Browser. Für die offizielle jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) benötigen Sie Internet, keine Installation. Bedienung und Konsolenbeispiele wurden mit 3.7.1 und 4.0.0 ausgeführt. Das native getAttribute() zeigt das Attribut versionsübergreifend gleich an.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and change DOM properties</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button { font: inherit; margin: 4px; max-width: 100%; }
    label { display: block; padding: 12px; border: 1px solid #aab; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Current properties and markup attributes</h1>
  <form id="demo-form">
    <label><input type="checkbox" id="subscribe" name="subscription" value="weekly" checked=""> Weekly subscription</label>
  </form>
  <button type="button" id="toggle">Toggle checked</button>
  <button type="button" id="set">Set unchecked and disabled</button>
  <button type="button" id="enable">Enable</button>
  <button type="button" id="notify">Check and trigger change</button>
  <button type="button" id="reset">Reset</button>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $box = $("#subscribe");
      let changes = 0;
      function report() {
        $("#result").text(`checked=${$box.prop("checked")}\ndefaultChecked=${$box.prop("defaultChecked")}\nchecked attribute=${JSON.stringify($box.get(0).getAttribute("checked"))}\ndisabled=${$box.prop("disabled")}\nvalue=${$box.val()}\nchange events=${changes}`);
      }
      $box.on("change", function () { changes++; report(); });
      $("#toggle").on("click", function () { $box.prop("checked", function (index, old) { return !old; }); report(); });
      $("#set").on("click", function () { $box.prop({ checked: false, disabled: true }); report(); });
      $("#enable").on("click", function () { $box.prop("disabled", false); report(); });
      $("#notify").on("click", function () { $box.prop("checked", true).trigger("change"); });
      $("#reset").on("click", function () { $("#demo-form").get(0).reset(); $box.prop("disabled", false); changes = 0; report(); });
      report();
    });
  </script>
</body>
</html>

Die Anfangsausgabe folgt. Zwei Anführungszeichen bei checked attribute bedeuten: Attribut vorhanden, Wert leerer String. Ohne Attribut würde getAttribute() null liefern.

checked=true
defaultChecked=true
checked attribute=""
disabled=false
value=weekly
change events=0

1. Toggle checked setzt checked auf false und erhält Standard, Attribut und value. change events bleibt bei null.
2. Kreuzen Sie die Checkbox direkt an: change events steigt um eins. Zustandsänderung und Ereignisbenachrichtigung sind getrennt zu betrachten.
3. Set unchecked and disabled setzt .prop({ checked: false, disabled: true }). Die Checkbox ist abgewählt und nicht direkt bedienbar.
4. Enable setzt disabled auf false, ohne die Checkbox anzukreuzen.
5. Check and trigger change setzt checked auf true und löst change ausdrücklich aus. Der Zähler steigt; bloßes Setzen der Eigenschaft führt den change-Handler nicht aus.
6. Reset stellt den Standard-Auswahlzustand wieder her, setzt disabled separat auf false und den Zähler auf null. Wiederholungen liefern dieselbe Anfangsausgabe.

Formular-reset() stellt disabled nicht automatisch wieder her; das Beispiel hebt es ausdrücklich auf. Das Auslösen von change benachrichtigt registrierte Handler und bildet keine vollständige physische Zeigerbedienung nach. Reicht nach einer programmgesteuerten Änderung eine neue Anzeige aus, können Sie report() direkt aufrufen.

Objektsetter, Funktionen und selectedIndex

Mehrere Eigenschaften setzen Sie mit einem Objekt, elementabhängige Werte mit einer Funktion. Diese erhält den nullbasierten Index und bisherigen Wert; ihr Rückgabewert wird die neue Eigenschaft. Führen Sie nach Reset diesen vollständigen Teilcode in der Entwicklerkonsole aus. Zwei temporäre Checkboxen werden umgeschaltet, deaktiviert und abschließend entfernt.

const $holder = $('<div><input type="checkbox" checked><input type="checkbox"></div>').appendTo("body");
const $boxes = $holder.find("input");
console.log(`before=${$boxes.map(function () { return this.checked; }).get().join(",")}`);
$boxes.prop("checked", function (index, old) { return !old; });
$boxes.prop({ disabled: true });
console.log(`after=${$boxes.map(function () { return this.checked; }).get().join(",")}`);
console.log(`first getter=${$boxes.prop("checked")}; type=${typeof $boxes.prop("checked")}`);
console.log(`disabled count=${$boxes.filter(":disabled").length}`);
console.log(`empty getter=${typeof $().prop("checked")}`);
$holder.remove();

before=true,false
after=false,true
first getter=false; type=boolean
disabled count=2
empty getter=undefined

Der Getter .prop("checked") liefert nur false des ersten Elements, der Setter bearbeitet beide. Lesen Sie jeden Zustand über .map() oder .each(). Ein abgewähltes erstes Element bedeutet nicht, dass alle abgewählt sind.

selectedIndex eines select ist ebenfalls eine Eigenschaft; die erste Option hat Index null. .val() liest den Wert der ausgewählten Option. Dieser Konsolencode wählt die zweite Option, zeigt Index und Wert an und entfernt das temporäre Element.

const $select = $('<select><option value="a">Alpha</option><option value="b">Beta</option></select>').appendTo("body");
$select.prop("selectedIndex", 1);
console.log(`index=${$select.prop("selectedIndex")}; value=${$select.val()}`);
$select.remove();

index=1; value=b

Scheinbar unveränderte Werte untersuchen

Übergeben Sie checked und disabled den booleschen Wert false, nicht den String "false". In der geprüften Umgebung wurde .prop("checked", "false") zu true konvertiert und aktivierte die Checkbox. Setzen Sie eingebaute Zustände ausdrücklich, etwa .prop("disabled", false), statt eingebaute Eigenschaften zu entfernen.

Bei leerer Auswahl liefert der Getter undefined. Unterscheiden Sie das von false als gültigem abgewähltem Zustand. Falls ein Ziel existieren sollte, prüfen Sie Selektor, .length und DOM-Bereitschaft. Entscheiden Sie zwischen HTML-Attribut und DOM-Eigenschaft, statt beliebige data-*-Attribute mit dem aktuellen checked-Zustand zu vermischen.