Wie füge ich einem <Eingang> ein "schreibgeschütztes" Attribut hinzu?

301

Wie kann ich readonlyzu einem bestimmten hinzufügen <input>? .attr('readonly')funktioniert nicht.

javascript jquery

— Qiao
quelle

2

.attr ('readonly', true) funktioniert, andere nicht

— Qiao

3

.attr ('readonly', 'readonly') funktioniert auch

— Qiao

3

Es hängt davon ab, welchen DOCTYPE Sie verwenden. Für HTML 4.01 DTDs funktioniert die Antwort von CMS und gültiges HTML 4.01. Wenn Sie eine XHTML-DTD verwenden, funktioniert die Antwort von ceejayoz und ist XHTML gültig.

— Bjoernwibben

2

Es hängt nicht vom Doctype ab, das DOM ist das gleiche, ob es über HTML oder XML eingelesen wurde, und auf jeden Fall wird XHTML aus Gründen der IE-Kompatibilität fast immer noch als HTML und nicht als XML bereitgestellt.

— Bobince

545

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

Lesen Sie mehr über den Unterschied zwischen Prop und Attr

— CMS
quelle

1

Bist du sicher? Das habe ich mir auch gedacht, kann aber in den technischen Daten nichts finden. <input name = "foo" readonly = "readonly" value = "bar" /> wird bei validator.w3.org mit xhtml 1.0 strict perfekt validiert.

— Jonas Stensved

17

Dieser Beitrag sollte in .prop () anstatt in .attr () geändert werden, wie in der jQuery-API angegeben: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

Das schreibgeschützte Attribut ist ein "boolesches Attribut" - whatwg.org/specs/web-apps/current-work/#boolean-attribute Trotz des etwas irreführenden Namens sollten die Werte nicht "wahr" oder "falsch" sein. Obwohl ich denke, dass der obige Code tatsächlich funktioniert (getestet in Chrome mit jQuery 1.8.1), kann er zu späterer Verwirrung für Unerfahrene führen. Gemäß den jQuery-Dokumenten sollte der Wert auch eine Zahl oder eine Zeichenfolge sein, kein Boolescher Wert. api.jquery.com/attr/#attr2

— Luke

151

Verwenden Sie $ .prop ()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);

— Greg
quelle

8

Nach dem Lesen der jQuery-API für .prop sollte dies die akzeptierte Antwort sein. Ich hatte in der Vergangenheit immer .attr ('readonly', 'readonly') und .removeAttr ('readonly') gemacht, aber dies scheint korrekter zu sein und macht den Code auch sauberer.

— Evan w

4

Jeder sollte diese Antwort verwenden, wie hier angegeben: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

4

Ein Wort der Vorsicht bei der Verwendung von $.prop(): Prop setzt das schreibgeschützte Attribut auf eine leere / leere Zeichenfolge. Wenn Sie also über CSS verfügen, für das der Attributselektor verwendet wird [readonly="readonly"], müssen Sie dies in [readonly](oder beides) ändern .

— Luke

28

Readonly ist ein Attribut, wie es in HTML definiert ist. Behandeln Sie es also wie eines.

Sie müssen so etwas wie readonly = "readonly" in dem Objekt haben, mit dem Sie arbeiten, wenn Sie möchten, dass es nicht bearbeitet werden kann. Und wenn Sie möchten, dass es wieder bearbeitet werden kann, haben Sie nicht so etwas wie readonly = '' (dies ist kein Standard, wenn ich es richtig verstanden habe). Sie müssen das Attribut wirklich als Ganzes entfernen.

Wenn Sie jquery verwenden, ist es sinnvoll, es hinzuzufügen und zu entfernen.

Stellen Sie etwas schreibgeschützt ein:

$("#someId").attr('readonly', 'readonly');

Schreibgeschützt entfernen:

$("#someId").removeAttr('readonly');

Dies war die einzige Alternative, die wirklich für mich funktioniert hat. Ich hoffe es hilft!

20

.attr('readonly', 'readonly')sollte den Trick machen. Sie geben .attr('readonly')nur den Wert zurück, es wird kein Wert festgelegt.

— ceejayoz
quelle

16

jQuerys attr () funktioniert mit JavaScript-Eigenschaften, nicht mit HTML-Attributen, obwohl die Namen etwas anderes implizieren. attr ('readonly') arbeitet tatsächlich mit der DOM Level 1 HTML-Eigenschaft readOnly, die ein Boolescher Wert ist. Daher ist 'true' besser geeignet. Die Zeichenfolge 'readonly' ist jedoch auch ein wahrer Wert, wenn sie automatisch in einen Booleschen Wert konvertiert wird. Daher funktioniert die obige Zeichenfolge weiterhin.

— Bobince

Ich glaube nicht, dass Sie das Attribut auf 'true' setzen möchten. Der .attrWert sollte gemäß den jQuery-Dokumenten nur eine Zeichenfolge oder Zahl sein, kein Boolescher Wert: api.jquery.com/attr/#attr2 Außerdem sollten HTML-Boolesche Attribute nur eine leere Zeichenfolge oder der Wert des Attributs sein. Ich denke, die Lösung besteht darin .prop(), Verwirrung zu vermeiden.

— Luke

16

Ich denke, "deaktiviert" schließt die Eingabe vom POST aus

4

Ja tut es. Ich habe diesen Thread gefunden, als ich nach einer Alternative zu "deaktiviert" gesucht habe, nur aus diesem Grund.

— Jonas Stensved

Sie können es jedoch unmittelbar vor dem Senden aktivieren und später deaktivieren. $ (document) .on ('submit', "#myform", Funktion (e) {// enable input return true; // deaktivieren Sie es dann erneut, wenn Sie erfordern} es funktioniert ich habe es getestet

— Geomorillo

Dürfen schreibgeschützte Eingabewerte in HTML auf POST gesendet werden, ohne versteckte zu verwenden?

— Ajay Takur

12

Sie können die schreibgeschützte Funktion mithilfe von .removeAttr deaktivieren.

$('#descrip').removeAttr('readonly');

— Steve
quelle

5

Zum Aktivieren von Readonly:

$("#descrip").attr("readonly","true");

Zum Deaktivieren von Readonly

$("#descrip").attr("readonly","");

— Pradeep
quelle

Von api.jquery.com/attr "Ab jQuery 1.6 gibt die Methode .attr () undefinierte Attribute zurück, die nicht festgelegt wurden. Zum Abrufen und Ändern von DOM-Eigenschaften wie dem aktivierten, ausgewählten oder deaktivierten Status von Formularelementen. Verwenden Sie die Methode .prop (). "

— David Clarke

1

Das Attribut sollte nicht auf eine Zeichenfolge von "true" gesetzt werden. Dies mag funktionieren, ist aber technisch nicht korrekt. (Siehe meine vorherigen Kommentare oben.)

— Luke

Verwenden Sie diesen Vorschlag nicht, viel bessere finden Sie hier. "true" ist für die Einstellung nicht korrekt, und das Entfernen ist ebenfalls falsch.

— MiFiHiBye

4

Verwenden Sie die Eigenschaft setAttribute. Beachten Sie im Beispiel, dass bei Auswahl von 1 das schreibgeschützte Attribut auf das Textfeld angewendet wird, andernfalls das schreibgeschützte Attribut entfernt wird.

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

— Diogo Rodrigues
quelle

-4

Für jQuery Version <1.9:

$('#inputId').attr('disabled', true);

Für jQuery-Version> = 1.9:

$('#inputId').prop('disabled', true);

— Osman Adak
quelle