Come aggiungere un attributo "sola lettura" a un <input>?

301

Come posso aggiungere readonlyuno specifico <input>? .attr('readonly')non funziona.

javascript jquery

— Qiao
fonte

2

.attr ('readonly', true) funziona, altro no

— Qiao

3

.attr ('readonly', 'readonly') funziona anche

— Qiao

3

Dipende da quale DOCTYPE usi. Per DTD HTML 4.01 la risposta di CMS funziona e HTML 4.01 valido. Se si utilizza un DTD XHTML, la risposta di ceejayoz funziona e XHTML valido.

— bjoernwibben,

2

Non dipende da doctype, il DOM è lo stesso sia che sia stato letto tramite HTML o XML, e in ogni caso XHTML è quasi sempre effettivamente servito come HTML non XML, per compatibilità con IE.

— Bobince,

545

jQuery <1.9

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

jQuery 1.9+

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

Maggiori informazioni sulla differenza tra prop e attr

— CMS
fonte

1

Sei sicuro? Ho pensato anche così, ma non riesco a trovare nulla nelle specifiche. <input name = "foo" readonly = "readonly" value = "bar" /> si convalida perfettamente su validator.w3.org con xhtml 1.0 strict.

— Jonas Stensved,

17

Questo post deve essere modificato in .prop () anziché .attr (), come indicato nell'API jQuery: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca,

L'attributo readonly è un "attributo booleano" - whatwg.org/specs/web-apps/current-work/#boolean-attribute Nonostante il nome alquanto fuorviante, i valori non dovrebbero essere "vero" o "falso". Mentre penso che il codice sopra funzionerà effettivamente (testato in Chrome con jQuery 1.8.1), può portare a confusione successiva per gli inesperti. Inoltre, secondo i documenti jQuery, il valore dovrebbe essere numero o stringa, non un valore booleano. api.jquery.com/attr/#attr2

— Luca

151

Usa $ .prop ()

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

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

— Greg
fonte

8

Dopo aver letto l'API jQuery per .prop, questa dovrebbe essere la risposta accettata. Avevo sempre fatto .attr ('readonly', 'readonly') e .removeAttr ('readonly') in passato, ma questo sembra essere più corretto e rende anche il codice più pulito.

— evan w,

4

Tutti dovrebbero usare questa risposta, come indicato qui: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

4

Un avvertimento con l'utilizzo di $.prop(): Prop imposterà l'attributo readonly su stringa vuota / vuota, quindi se hai qualche CSS che usa il selettore di attributi per [readonly="readonly"], allora dovrai cambiarlo in [readonly](o includerli entrambi).

— Luca,

28

Di sola lettura è un attributo come definito in HTML, quindi trattalo come tale.

Devi avere qualcosa come readonly = "readonly" nell'oggetto con cui stai lavorando se vuoi che non sia modificabile. E se vuoi che sia di nuovo modificabile non avrai qualcosa come readonly = '' (questo non è standard se ho capito correttamente). Devi veramente rimuovere l'attributo nel suo insieme.

Come tale, mentre si utilizza jquery aggiungerlo e rimuoverlo è ciò che ha senso.

Imposta qualcosa di sola lettura:

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

Rimuovi di sola lettura:

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

Questa è stata l'unica alternativa che ha funzionato davvero per me. Spero che sia d'aiuto!

20

.attr('readonly', 'readonly')dovrebbe fare il trucco. Il tuo .attr('readonly')restituisce solo il valore, non imposta uno.

— ceejayoz
fonte

16

attr () di jQuery funziona su proprietà JavaScript, non su attributi HTML, anche se i nomi implicano diversamente. attr ('readonly') attualmente sta funzionando con la proprietà HTML di livello 1 DOM readOnly, che è un valore booleano, quindi 'true' è più appropriato. Tuttavia, la stringa "sola lettura" è anche un valore veritiero quando viene convertita automaticamente in un valore booleano, quindi quanto sopra funziona ancora.

— Bobince,

Non penso che tu voglia impostare l'attributo su "true". Il .attrvalore dovrebbe essere solo una stringa o un numero, non un valore booleano, secondo i documenti jQuery: api.jquery.com/attr/#attr2 Inoltre, gli "attributi booleani HTML" dovrebbero essere solo una stringa vuota o il valore dell'attributo. Penso che la soluzione sia usare .prop()per evitare confusione.

— Luca,

16

Penso che "disabilitato" esclude l'input dall'invio sul POST

4

Sì lo fa. Ho trovato questa discussione mentre cercavo un'alternativa a "disabilitato" proprio per questo motivo.

— Jonas Stensved,

ma puoi abilitarlo poco prima di inviarlo e disabilitarlo in seguito $ (document) .on ('submit', "#myform", function (e) {// abilita gli input restituiscono true; // quindi disabilitalo di nuovo se richiedono} funziona, l'ho provato

— Geomorillo,

I valori di input di sola lettura in HTML possono essere inviati su POST senza usare nascosto?

— Ajay Takur,

12

È possibile disabilitare la sola lettura utilizzando .removeAttr;

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

— Steve
fonte

5

Per abilitare in sola lettura:

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

Per disabilitare in sola lettura

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

— Pradeep
fonte

Da api.jquery.com/attr "A partire da jQuery 1.6, il metodo .attr () restituisce undefined per gli attributi che non sono stati impostati. Per recuperare e modificare le proprietà DOM come lo stato selezionato, selezionato o disabilitato degli elementi del modulo, usa il metodo .prop (). "

— David Clarke,

1

L'attributo non deve essere impostato su una stringa di "true". Questo può funzionare, ma non è tecnicamente corretto. (Vedi i miei precedenti commenti sopra.)

— Luca,

Non usare questo suggerimento, quelli molto migliori disponibili qui. "true" non è corretto per l'impostazione e anche la rimozione non è corretta.

— MiFiHiBye il

4

Utilizzare la proprietà setAttribute. Si noti ad esempio che se si seleziona 1 applica l'attributo readonly nella casella di testo, altrimenti rimuovere l'attributo in sola lettura.

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
fonte

-4

Per la versione jQuery <1.9:

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

Per la versione jQuery> = 1.9:

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

— Osman Adak
fonte