Come posso usare jQuery per effettuare un input in sola lettura?

142

Ho il seguente input:

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

Come posso usare jQuery per rendere questo elemento un input di sola lettura senza cambiare l'elemento o il suo valore?

jquery

— useranon
fonte

255

In questi giorni con jQuery 1.6.1 o versioni successive si consiglia di utilizzare .prop () durante l'impostazione di attributi / proprietà booleane.

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

— Gourneau
fonte

89

aggiungi semplicemente il seguente attributo

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

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

jQuery per apportare la modifica all'elemento (sostituto disabledper readonlyin seguito per l'impostazione readonlyattributo).

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

o

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

NOTA: A partire da jQuery 1.6, si consiglia di utilizzare .prop()anziché .attr(). Il codice sopra funzionerà esattamente lo stesso tranne che .attr()per il sostituto .prop().

— Russ Cam
fonte

4

disabilitare un campo non equivale a renderlo non modificabile, giusto? disabilitandolo non verrà inviato

— Dave

2

@Dave corretto. Anche gli input di sola lettura possono essere focalizzati, gli input disabilitati no

— Russ Cam

74

Per effettuare un input in sola lettura utilizzare:

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

per farlo leggere / scrivere usa:

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

l'aggiunta disableddell'attributo non invierà il valore con post.

— Reem
fonte

7

Puoi farlo semplicemente marcandolo disabledo enabled. Puoi usare questo codice per fare questo:

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

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

o

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

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

--- È meglio usare prop invece di attr.

— pixellab
fonte

7

Gli input disabilitati non vengono inviati sul modulo post / get.

— Nielsvh,

4

Utilizzare questo esempio per rendere la casella di testo ReadOnly o Not.

<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
fonte

3

Esistono due attributi, vale a dire readonlye disabled, che possono rendere un input di sola lettura. Ma c'è una piccola differenza tra loro.

<input type="text" readonly />
<input type="text" disabled />

L' readonlyattributo rende il testo di input disabilitato e gli utenti non possono più modificarlo.
L' disabledattributo non solo renderà il tuo testo di input disabilitato (immutabile), ma non potrà nemmeno essere inviato .

Approccio jQuery (1):

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

Approccio jQuery (2):

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

Approccio JavaScript:

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

PS propintrodotto con jQuery 1.6.

— Elyas Hadizadeh
fonte

0

Dato -

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

funziona - (jquery 1.7.1)

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

testato con readonly e readOnly - entrambi hanno funzionato.

— CHANDAN DEL NAVNEET
fonte

-1

Forse usa l'attributo disabilitato:

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

O semplicemente usa il tag label:;)

<label>

— IProblemFactory
fonte

1

La domanda diceva "Con jQuery" (il che implica che dovrebbe essere fatto in modo dinamico) e "sola lettura" (che è diverso da disabilitato).

— 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
fonte

-1

Forse è significativo aggiungere anche quello

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

può essere utilizzato come opzione di attivazione / disattivazione.

— Josh Pule
fonte

Ho provato questo con jQuery 3.3.1 e aggiunge semplicemente un readonlyattributo all'elemento, indipendentemente dal valore passato. Quindi il tuo esempio finirebbe per rendere il campo di input di sola lettura, nonostante apparentemente impostando il valore su false.

— TMN

-1

In JQuery 1.12.1, la mia applicazione utilizza il codice:

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

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

e funziona.

— PK
fonte

-2

SetReadOnly (stato) è molto utile per i moduli, possiamo impostare qualsiasi campo su setReadOnly (stato) direttamente o da varie condizioni.Ma preferisco usare readOnly per impostare l'opacità sul selettore, altrimenti anche attr = 'disabled' funzionava come il stessa strada.

readSolo esempi:

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

o attraverso le varie codifiche come

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

qui stiamo usando il valore booleano dello stato per impostare e rimuovere l'attributo readonly dall'input in base a un clic della casella di controllo.

— pixellabme
fonte

gli esempi sopra non funzionano - setReadOnly non è una funzione integrata in jquery o in qualsiasi browser

— Dave B 84

-3

In html

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

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

nel bootstrap

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

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

JQuery è una libreria in evoluzione e talvolta apportano miglioramenti regolari. .attr () viene utilizzato per ottenere gli attributi dai tag HTML e, sebbene sia perfettamente funzionale, .prop () è stato aggiunto in seguito per essere più semantico e funziona meglio con attributi senza valore come "controllato" e "selezionato".

Si consiglia di utilizzare .prop () se si utilizza una versione successiva di JQuery ogni volta che è possibile.

— Raja Ram T
fonte

2

L'ho votato perché non ha senso. È tutto HTML, JavaScript e Bootstrap utilizza jQuery quindi questo fatto non è nemmeno rilevante. Inoltre, disabilitati e di sola lettura sono due cose diverse che funzionano indipendentemente dal fatto che Bootstrap sia usato o meno.

— simontemplar,