Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat kotak semak baca sahaja dalam jquery
Bagaimana untuk membuat kotak semak baca sahaja dalam jquery
- 青灯夜游asal
- 2022-07-25 16:06:392384semak imbas
Dua kaedah baca sahaja: 1. Gunakan attr() untuk menambah atribut yang dilumpuhkan pada kotak pilihan, sintaksnya ialah "$("input[type='checkbox']").attr("disabled" ,true);"; 2. Gunakan click() untuk menetapkan status kotak semak tanpa mengubah keadaan kotak semak apabila diklik. Sintaksnya ialah "$("input[type='checkbox']").click(function(){return palsu;})" .
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.0, komputer Dell G3.
Apabila bercakap tentang baca sahaja, mudah untuk difikirkan untuk menggunakan atribut baca sahaja, tetapi untuk kotak pilihan, atribut ini berbeza daripada kesan yang dijangkakan. Sebabnya ialah atribut baca sahaja dikaitkan dengan atribut nilai elemen halaman (seperti kotak teks, kandungan teks kotak input tidak boleh diubah suai apabila baca sahaja ditetapkan), dan menanda/menyahtanda kotak semak tidak mengubah atribut nilainya. , hanya keadaan yang diperiksa. Jadi untuk kotak semak, jika baca sahaja ditetapkan, ia masih boleh disemak/dibatalkan.
<input type="checkbox" readonly>option a<br> <input type="checkbox" readonly>option b<br> <input type="checkbox" readonly>option c<br>
Tetapi sama seperti baca sahaja, terdapat juga atribut yang dilumpuhkan Fungsi atribut ini adalah untuk menetapkan elemen halaman menjadi tidak tersedia, iaitu, tiada interaktif operasi boleh dilakukan (termasuk Atribut nilai tidak boleh diubah suai, status yang diperiksa tidak boleh diubah suai, dsb.).
<input type="checkbox" disabled>option a<br> <input type="checkbox" disabled>option b<br> <input type="checkbox" disabled>option c<br>
Kaedah 1:
Dalam jquery, anda boleh menggunakan attr() untuk kotak semak Tambah atribut yang dilumpuhkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("input[type='checkbox']").attr("disabled", true);
});
});
</script>
</head>
<body>
<input type="checkbox">option a<br>
<input type="checkbox">option b<br>
<input type="checkbox">option c<br>
<br>
<button>让复选框只读</button>
</body>
</html>
Kaedah 2:
Jika anda menggunakan atribut disabled="disabled", kotak semak akan menjadi Jika ia berwarna kelabu keluar, pengguna mungkin jijik dengan kesannya Anda juga boleh menetapkan kotak semak untuk tidak mengubah keadaan apabila diklik.
$(document).ready(function() {
$("button").click(function() {
$("input[type='checkbox']").click(
function(){return false;}
);
});
});
Tutorial video berkaitan yang disyorkan: Tutorial jQuery (Video)
Atas ialah kandungan terperinci Bagaimana untuk membuat kotak semak baca sahaja dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!