Bagaimana cara menambahkan atribut "readonly" ke <input>?

301

Bagaimana saya bisa menambahkan readonlyke spesifik <input>? .attr('readonly')tidak bekerja.

javascript jquery

— Qiao
sumber

2

.attr ('readonly', true) bekerja, yang lain tidak

— Qiao

3

.attr ('readonly', 'readonly') juga berfungsi

— Qiao

3

Itu tergantung pada DOCTYPE yang Anda gunakan. Untuk HTML 4.01, DTD jawaban dari CMS berfungsi dan HTML 4.01 yang valid. Jika Anda menggunakan XHTML DTD maka jawaban dari ceejayoz berfungsi dan XHTML yang valid.

— bjoernwibben

2

Itu tidak tergantung pada doctype, DOM adalah sama apakah itu dibaca melalui HTML atau XML, dan dalam hal apapun XHTML hampir selalu masih benar-benar berfungsi sebagai HTML bukan XML, untuk kompatibilitas IE.

— bobince

545

jQuery <1.9

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

jQuery 1.9+

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

Baca lebih lanjut tentang perbedaan antara prop dan attr

— CMS
sumber

1

Apakah kamu yakin Saya juga berpikir begitu tetapi tidak dapat menemukan apa pun dalam spesifikasi. <input name = "foo" readonly = "readonly" value = "bar" /> divalidasi dengan sempurna di validator.w3.org dengan xhtml 1.0 ketat.

— Jonas Stensved

17

Posting ini harus diubah menjadi .prop () daripada .attr (), sebagaimana dinyatakan dalam API jQuery: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

Atribut readonly adalah "atribut boolean" - whatwg.org/specs/web-apps/current-work/#boolean-attribute Meskipun namanya agak menyesatkan, nilainya tidak boleh "benar" atau "salah". Meskipun saya pikir kode di atas akan benar-benar berfungsi (diuji di Chrome dengan jQuery 1.8.1), ini dapat menyebabkan kebingungan di kemudian hari bagi yang belum berpengalaman. Juga, menurut dokumen jQuery nilai harus berupa angka atau string, bukan boolean. api.jquery.com/attr/#attr2

— Luke

151

Gunakan $ .prop ()

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

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

— Greg
sumber

8

Setelah membaca API jQuery untuk .prop, ini harus menjadi jawaban yang diterima. Saya selalu melakukan .attr ('readonly', 'readonly') dan .removeAttr ('readonly') di masa lalu, tetapi ini tampaknya lebih benar dan membuat kode lebih bersih juga.

— evan w

4

Semua orang harus menggunakan jawaban ini, seperti yang dinyatakan di sini: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

4

Sebuah kata hati-hati dengan menggunakan $.prop(): Prop akan mengatur atribut readonly menjadi string kosong / kosong, jadi jika Anda memiliki CSS yang menggunakan pemilih atribut untuk [readonly="readonly"], maka Anda harus mengubahnya ke [readonly](atau memasukkan keduanya).

— Lukas

28

Readonly adalah atribut yang didefinisikan dalam html, jadi perlakukan itu seperti atribut.

Anda perlu memiliki sesuatu seperti readonly = "readonly" pada objek yang Anda kerjakan jika Anda ingin itu tidak dapat diedit. Dan jika Anda ingin dapat diedit lagi Anda tidak akan memiliki sesuatu seperti readonly = '' (ini bukan standar jika saya mengerti dengan benar). Anda benar-benar perlu menghapus atribut secara keseluruhan.

Dengan demikian, saat menggunakan jquery menambahkan dan menghapusnya adalah hal yang masuk akal.

Atur sesuatu hanya baca:

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

Hapus hanya baca:

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

Ini adalah satu-satunya alternatif yang benar-benar bekerja untuk saya. Semoga ini bisa membantu!

20

.attr('readonly', 'readonly')harus melakukan trik. Anda .attr('readonly')hanya mengembalikan nilai, itu tidak menetapkan satu.

— ceejayoz
sumber

16

attr () jQuery bekerja pada properti JavaScript, bukan atribut HTML, meskipun namanya menyiratkan sebaliknya. attr ('readonly') sebenarnya beroperasi pada properti HTML DOM Level 1 readOnly, yang merupakan boolean, jadi 'true' lebih tepat. Namun, string 'readonly' juga merupakan nilai yang sebenarnya ketika secara otomatis dikonversi ke boolean, sehingga string di atas masih berfungsi.

— bobince

Saya tidak berpikir Anda ingin mengatur atribut ke 'true'. The .attrnilai hanya harus string atau nomor, tidak boolean, menurut docs jQuery: api.jquery.com/attr/#attr2 Juga, HTML "atribut boolean" hanya harus string kosong atau nilai atribut. Saya pikir solusinya adalah menggunakan .prop()untuk menghindari kebingungan.

— Luke

16

Saya pikir "dinonaktifkan" mengecualikan input dari yang dikirim pada POST

4

Ya itu. Saya menemukan utas ini saat mencari alternatif untuk "dinonaktifkan" hanya karena alasan ini.

— Jonas Stensved

tetapi Anda dapat mengaktifkannya tepat sebelum mengirimnya, dan nonaktifkan nanti $ (dokumen) .on ('kirim', "#myform", fungsi (e) {// aktifkan input mengembalikan true; // lalu nonaktifkan lagi jika Anda membutuhkan} berfungsi saya mengujinya

— Geomorillo

Apakah hanya membaca nilai input dalam html diizinkan untuk dikirim pada POST tanpa menggunakan disembunyikan?

— Ajay Takur

12

Anda dapat menonaktifkan readonly dengan menggunakan .removeAttr;

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

— Steve
sumber

5

Untuk mengaktifkan readonly:

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

Untuk menonaktifkan baca saja

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

— Pradeep
sumber

Dari api.jquery.com/attr "Pada jQuery 1.6, metode .attr () mengembalikan undefined untuk atribut yang belum disetel. Untuk mengambil dan mengubah properti DOM seperti keadaan elemen elemen yang dicentang, dipilih, atau dinonaktifkan, gunakan metode .prop (). "

— David Clarke

1

Atribut tidak boleh diatur ke string "true". Ini mungkin berhasil, tetapi secara teknis tidak benar. (Lihat komentar saya sebelumnya di atas.)

— Luke

Jangan gunakan saran ini, yang jauh lebih baik tersedia di sini. "true" tidak benar untuk pengaturan, dan menghapus juga salah.

— MiFiHiBye

4

Gunakan properti setAttribute. Perhatikan dalam contoh bahwa jika pilih 1 menerapkan atribut readonly pada kotak teks, jika tidak hapus atribut readonly.

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
sumber

-4

Untuk versi jQuery <1.9:

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

Untuk versi jQuery> = 1.9:

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

— Osman Adak
sumber