Bagaimana saya bisa menggunakan jQuery untuk membuat input hanya baca?

142

Saya memiliki input berikut:

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

Bagaimana saya bisa menggunakan jQuery untuk membuat elemen ini menjadi input read-only tanpa mengubah elemen atau nilainya?

jquery useranon
sumber

Jawaban:

255

Hari-hari ini dengan jQuery 1.6.1 atau di atasnya, direkomendasikan .prop () digunakan ketika mengatur atribut / properti boolean.

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

cukup tambahkan atribut berikut

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

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

jQuery untuk membuat perubahan ke elemen (pengganti disableduntuk readonlydi berikut untuk pengaturan readonlyatribut).

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

atau 

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

CATATAN: Pada jQuery 1.6, disarankan untuk menggunakan .prop()alih-alih .attr(). Kode di atas akan bekerja persis sama kecuali pengganti .attr()untuk .prop().

Russ Cam
sumber
4
menonaktifkan bidang tidak sama dengan membuatnya tidak dapat diedit, kan? menonaktifkannya akan membuatnya juga tidak mengirimkan
Dave
2
@ Sudah benar. Input yang hanya dapat dibaca dapat difokuskan, input yang dinonaktifkan tidak dapat
Russ Cam
74

Untuk membuat input hanya baca gunakan:

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

untuk membuatnya baca / tulis gunakan:

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

menambahkan disabledatribut tidak akan mengirim nilai dengan pos.

Reem
sumber
7

Anda dapat melakukan ini hanya dengan menandainya disabledatau enabled. Anda dapat menggunakan kode ini untuk melakukan ini:

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

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

atau

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

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

--- Lebih baik menggunakan prop daripada ATTR.

Pixellab
sumber
7
Input yang dinonaktifkan tidak dapat dikirim pada formulir post / get.
Nielsvh
4

Gunakan contoh ini untuk membuat kotak teks ReadOnly or 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
sumber
3

Ada dua atribut, yaitu readonlydan disabled, yang dapat membuat input semi-baca-saja. Tetapi ada perbedaan kecil di antara mereka.

<input type="text" readonly />
<input type="text" disabled />
  • The readonlyAtribut membuat teks masukan Anda dinonaktifkan, dan pengguna tidak dapat mengubahnya lagi.
  • disabledAtribut tidak hanya akan membuat input-teks Anda dinonaktifkan (tidak dapat diubah) tetapi juga tidak dapat dikirimkan .

Pendekatan jQuery (1):

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

Pendekatan jQuery (2):

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

Pendekatan JavaScript:

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

PS propdiperkenalkan dengan jQuery 1.6.

Elyas Hadizadeh
sumber
0

Mengingat -

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

ini bekerja - (jquery 1.7.1)

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

diuji dengan readonly dan readOnly - keduanya bekerja.

NAVNEET CHANDAN
sumber
-1

Mungkin menggunakan atribute dinonaktifkan:

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

Atau cukup gunakan label tag:;)

<label>
IProblemFactory
sumber
1
Pertanyaannya mengatakan "Dengan jQuery" (yang menyiratkan itu harus dilakukan secara dinamis) dan "read-only" (yang berbeda dengan dinonaktifkan).
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
sumber
-1

Mungkin bermanfaat juga untuk menambahkan itu 

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

dapat digunakan sebagai opsi sakelar ..

Josh Pule
sumber
Saya mencoba ini dengan jQuery 3.3.1 dan hanya menambahkan readonlyatribut ke elemen, terlepas dari nilai yang diteruskan. Jadi, contoh Anda akan membuat bidang input hanya-baca, meskipun seolah-olah menetapkan nilai ke false.
TMN
-1

Di JQuery 1.12.1, aplikasi saya menggunakan kode:

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

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

dan itu berhasil.

PK
sumber
-2

SetReadOnly (state) sangat berguna untuk form, kita dapat mengatur field apa saja untuk setReadOnly (state) secara langsung atau dari berbagai kondisi. cara yang sama.

bacaHanya contoh saja:

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

atau melalui berbagai kodisi suka

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

di sini kita menggunakan nilai boolean negara untuk mengatur dan menghapus atribut readonly dari input tergantung pada klik kotak centang.

pixellabme
sumber
contoh di atas tidak berfungsi - setReadOnly bukan fungsi yang dibangun dalam jquery atau browser apa pun
Dave B 84
-3

Dalam html 

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

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

di bootstrap 

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

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

JQuery adalah pustaka yang berubah dan kadang-kadang mereka melakukan perbaikan secara teratur. .attr () digunakan untuk mendapatkan atribut dari tag HTML, dan sementara itu fungsional .prop () ditambahkan kemudian agar lebih semantik dan berfungsi lebih baik dengan atribut yang kurang bernilai seperti 'diperiksa' dan 'dipilih'.

Disarankan bahwa jika Anda menggunakan versi JQuery yang lebih baru, Anda harus menggunakan .prop () bila memungkinkan.

Raja Ram T
sumber
2
Saya memilih ini karena itu tidak masuk akal. Semuanya HTML, JavaScript, dan Bootstrap menggunakan jQuery sehingga faktanya bahkan tidak relevan. Selain itu, dinonaktifkan dan hanya baca adalah dua hal berbeda yang berfungsi terlepas dari apakah Bootstrap digunakan atau tidak.
simontemplar