Bagaimana untuk menetapkan medan menjadi tidak boleh diedit dalam jquery

Dalam pembangunan bahagian hadapan, kami selalunya perlu membuat borang dan membenarkan pengguna mengisi kandungan borang. Medan berbeza dalam borang perlu ditetapkan kepada keadaan berbeza, sesetengah medan adalah baca sahaja dan sesetengah medan mungkin perlu dilumpuhkan sepenuhnya. Dalam senario ini, kita boleh menggunakan jQuery untuk menjadikan medan tidak boleh diedit.

1. Mengapakah kita perlu menetapkan medan supaya tidak boleh diedit

Dalam aplikasi praktikal, kita selalunya perlu menetapkan beberapa medan dalam bentuk supaya tidak boleh diedit, contohnya:

1. Apabila pengguna Selepas borang diserahkan, untuk memastikan keselamatan data, medan borang perlu dikunci untuk mengelakkan pengguna mengubah suai maklumat yang diserahkan.
2. Sesetengah maklumat sensitif, seperti kata laluan akaun, kod pengesahan SMS, dll., perlu ditetapkan kepada mod baca sahaja untuk menghalang pengguna daripada mengubah suainya.
3. Sesetengah medan dalam borang perlu dilumpuhkan di bawah syarat tertentu Contohnya, semasa membuat pembayaran, jika kaedah pembayaran tertentu dipilih, pengguna perlu dilarang mengubah suai jumlah pembayaran dan maklumat lain.

2. Cara menggunakan jQuery untuk menetapkan medan menjadi tidak boleh diedit

jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh digunakan untuk memudahkan operasi dokumen HTML, pengendalian acara, animasi kesan dan operasi lain. Dalam jQuery, kita boleh menggunakan fungsi attr() untuk menetapkan keadaan kotak teks yang tidak boleh diedit, kotak lungsur, kotak semak dan elemen lain.

Sekarang, mari lihat contoh kod ringkas:

medan tetapan jQuery tidak boleh diedit


$(document).ready(function(){
// Lumpuhkan kotak teks
$("input[ type ='text']").attr("disabled", "disabled");

// Disable drop-down box
$("select").attr("disabled", "disabled " );

//Lumpuhkan kotak semak
$("input[type='checkbox']").attr("disabled", "disabled");
});

Username:

Kata laluan:

Jantina:

<select>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

Hobi:

<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐

3. jQuery melaksanakan medan baca sahaja dan medan dilumpuhkan Status

Dalam contoh di atas, kami menggunakan atribut dilumpuhkan untuk melumpuhkan elemen borang. Tetapi bagaimana jika kita perlu menetapkan elemen borang kepada keadaan baca sahaja? Pada masa ini, ia boleh dicapai dengan menetapkan atribut baca sahaja.

Perbezaan antara atribut baca sahaja dan atribut dilumpuhkan ialah atribut baca sahaja hanya melarang pengguna daripada mengedit nilai elemen borang, tetapi pengguna masih boleh mengubah suai nilai elemen melalui skrip JS dan kaedah lain. Atribut yang dilumpuhkan melumpuhkan sepenuhnya elemen borang dan pengguna tidak boleh mengendalikan elemen tersebut.

Sekarang, mari kita lihat contoh kod untuk melaksanakan status baca sahaja dan dilumpuhkan medan:

< ;head>




$(document).ready(function(){
// Baca sahaja Kotak teks
$("inputtype='text'").css({"background-color": "#ccc", "border": "noe"});

// Lumpuhkan Kotak teks
$("inputtype='text'").css({"background-color": "#ccc", "border": "noe"});

/ / Kotak lungsur turun baca sahaja
$("select[readonly]").css({"background-color": "#ccc", "border": "none"});

// Lumpuhkan kotak lungsur
$("select[disabled]").css({"background-color": "#ccc", "border": "noe"});

// Kotak semak baca sahaja
$("inputtype='checkbox'").klik(function(){

return false;

});

// Lumpuhkan kotak pilihan
$("inputtype ='checkbox'").klik(function(){

return false;

});
});

 

用户名：

 

密码：

 

性别：

<select readonly>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

 

爱好：

<input type="checkbox" name="hobby" value="reading" readonly>阅读
<input type="checkbox" name="hobby" value="music" readonly>音乐

 

在上面的示例代码中，我们分别设置了文本框、下拉框和复选框的只读和禁用状态。当表单元素被设置为只读或禁用状态时，我们可以通过改变其样式以及绑定相应的事件来达到不同的效果。

总结

本文介绍了如何使用jQuery来设置表单元素的不可编辑状态，实现的方法包括禁用、只读、禁用样式等。在前端开发中，通过掌握这些方法，我们可以更好地控制表单元素的状态，提高用户体验及数据安全性。

Atas ialah kandungan terperinci Bagaimana untuk menetapkan medan menjadi tidak boleh diedit dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!