Wie kann ich jQuery verwenden, um eine Eingabe schreibgeschützt zu machen?

142

Ich habe folgende Eingabe:

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

Wie kann ich jQuery verwenden, um dieses Element zu einer schreibgeschützten Eingabe zu machen, ohne das Element oder seinen Wert zu ändern?

jquery useranon
quelle

Antworten:

255

Heutzutage wird mit jQuery 1.6.1 oder höher empfohlen, .prop () zu verwenden, wenn boolesche Attribute / Eigenschaften festgelegt werden.

$("#fieldName").prop("readonly", true);
Gourneau
quelle
89

Fügen Sie einfach das folgende Attribut hinzu

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery zu machen , um die Änderung zu dem Element (Ersatz disabledfür die readonlyin der folgenden für die Einstellung readonlyAttribut).

$('#fieldName').attr("disabled","disabled")

oder 

$('#fieldName').attr("disabled", true)

HINWEIS: Ab jQuery 1.6 wird empfohlen, .prop()anstelle von zu verwenden .attr(). Der obige Code funktioniert genauso wie der Ersatz .attr()für .prop().

Russ Cam
quelle
4
Das Deaktivieren eines Feldes ist nicht gleichbedeutend damit, dass es nicht bearbeitet werden kann, oder? Wenn Sie es deaktivieren, wird es auch nicht gesendet
Dave
2
@ Dave richtig. Auch schreibgeschützte Eingaben können fokussiert werden, deaktivierte Eingaben nicht
Russ Cam
74

Um eine Eingabe schreibgeschützt zu machen, verwenden Sie:

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

um es zum Lesen / Schreiben zu bringen:

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

Durch Hinzufügen des disabledAttributs wird der Wert nicht per Post gesendet.

Reem
quelle
7

Sie können dies tun, indem Sie es einfach markieren disabledoder enabled. Sie können diesen Code verwenden, um dies zu tun:

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

oder

$ ('# fieldName'). prop ('schreibgeschützt', true);

$ ('# fieldName'). prop ('readonly', false);

--- Es ist besser, prop anstelle von attr zu verwenden.

Pixellab
quelle
7
Deaktivierte Eingaben werden nicht auf dem Formular post / get gesendet.
Nielsvh
4

Verwenden Sie dieses Beispiel, um das Textfeld ReadOnly oder Not zu erstellen.

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>
Gopakumar AP
quelle
3

Es gibt zwei Attribute, nämlich readonlyund disabled, die eine schreibgeschützte Eingabe vornehmen können. Aber es gibt einen winzigen Unterschied zwischen ihnen.

<input type="text" readonly />
<input type="text" disabled />
  • Das readonlyAttribut deaktiviert Ihren Eingabetext und Benutzer können ihn nicht mehr ändern.
  • Das disabledAttribut macht Ihren Eingabetext nicht nur deaktiviert (unveränderlich), sondern kann auch nicht gesendet werden .

jQuery-Ansatz (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery-Ansatz (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

JavaScript-Ansatz:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS propeingeführt mit jQuery 1.6.

Elyas Hadizadeh
quelle
0

Gegeben -

<input name="foo" type="text" value="foo" readonly />

das funktioniert - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

getestet mit readonly und readOnly - beide haben funktioniert.

NAVNEET CHANDAN
quelle
-1

Verwenden Sie möglicherweise atribute disabled:

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

Oder verwenden Sie einfach das Etikett :;)

<label>
IProblemFactory
quelle
1
Die Frage lautete "Mit jQuery" (was impliziert, dass dies dynamisch erfolgen sollte) und "schreibgeschützt" (was sich von deaktiviert unterscheidet).
Quentin
-1 
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>
Raghav
quelle
-1

Vielleicht ist es sinnvoll, das auch hinzuzufügen 

$('#fieldName').prop('readonly',false);

kann als Umschaltoption verwendet werden ..

Josh Pule
quelle
Ich habe dies mit jQuery 3.3.1 versucht und es fügt readonlydem Element einfach ein Attribut hinzu , unabhängig vom übergebenen Wert. Ihr Beispiel würde also dazu führen, dass das Eingabefeld schreibgeschützt ist, obwohl der Wert angeblich auf false gesetzt ist.
TMN
-1

In JQuery 1.12.1 verwendet meine Anwendung folgenden Code:

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

und es funktioniert.

PK
quelle
-2

SetReadOnly (state) ist sehr nützlich für Formulare. Wir können jedes Feld direkt oder unter verschiedenen Bedingungen auf setReadOnly (state) setzen. Ich bevorzuge jedoch readOnly, um die Deckkraft des Selektors festzulegen, andernfalls funktionierte attr = 'disabled' auch wie das gleicher Weg.

readOnly Beispiele:

$('input').setReadOnly(true);

oder durch die verschiedenen Kodierungen wie

var same = this.checked;
$('input').setReadOnly(same);

Hier verwenden wir den Status-Booleschen Wert, um das schreibgeschützte Attribut abhängig von einem Kontrollkästchen-Klick festzulegen und aus der Eingabe zu entfernen.

pixellabme
quelle
Die obigen Beispiele funktionieren nicht - setReadOnly ist keine in jquery oder einem Browser integrierte Funktion
Dave B 84
-3

In HTML 

$('#raisepay_id').attr("readonly", true) 

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

im Bootstrap 

$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);

JQuery ist eine sich ändernde Bibliothek und manchmal werden sie regelmäßig verbessert. .attr () wird verwendet, um Attribute aus den HTML-Tags abzurufen, und obwohl es perfekt funktioniert, wurde .prop () später hinzugefügt, um semantischer zu sein, und es funktioniert besser mit wertlosen Attributen wie "markiert" und "ausgewählt".

Wenn Sie eine spätere Version von JQuery verwenden, sollten Sie nach Möglichkeit .prop () verwenden.

Raja Ram T.
quelle
2
Ich habe das abgelehnt, weil es unsinnig ist. Es ist alles HTML, JavaScript und Bootstrap verwendet jQuery, so dass die Tatsache nicht einmal relevant ist. Zusätzlich deaktiviert und schreibgeschützt sind zwei verschiedene Dinge, die unabhängig davon funktionieren, ob Bootstrap verwendet wird oder nicht.
Simontemplar