Pada kesempatan kali ini saya akan menjelaskan cara membatasi checked checkbox dengan jquery. Perlu teman-teman ketahui sebelumnya, checked adalah salah satu attribute checkbox yang berfungsi untuk membuat checkbox tersebut menjadi tercentang. Jadi secara garis besar apabila teman-teman memilih salah satu pilihan checkbox maka otomatis didalam tag checkbox yang dipilih tersebut akan terdapat attribute html checked.
Dari attribute tersebut bisa teman-teman gunakan untuk membuat validasi kondisi membatasi maksimal checkbox yang diperbolehkan untuk dipilih. Pada contoh penjelasan yang nantinya saya buat disini dimana saya membatasi pilihan checkbox hanya boleh dipilih sebanyak 4 checked diantara semua checkbox yang hanya boleh dipilih.
dari attribute checked tersebut nantinya saya manfaatkan untuk membuat kondisi pengecekan apabila attribute checked didalam tag checkedbox tersebut sudah ada sebanyak 4 maka akan mendisabled fungsi checked pada checkbox tersebut supaya tidak bisa dipilih lagi. Langsung saja untuk membuatnya teman-teman bisa ikuti tahapan seperti yang saya berikan dibawah ini.
Berikut Tahapannya :
- Terlebih dahulu teman-teman buat satu buah file html dengan nama index.html
- Jika sudah selanjutnya ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Membatasi Checked CheckBox Dengan Jquery</title>
</head>
<body>
<h3>Pilih Kategori Produk</h3>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="baju_pria">Baju Pria
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="baju_wanita">Baju Wanita
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="celana_pria">Celana Pria
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="celana_wanita">Celana Wanita
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="sepatu_pria">Sepatu Pria
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="sepatu_wanita">Sepatu Wanita
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="sandal_pria">Sandal Pria
</label>
<br>
<label>
<input type="checkbox" name="kategori[]" id="kategori" value="sandal_wanita">Sandal Wanita
</label>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$('input[type=checkbox]').on('change', function(evt) {
if($('input[id=kategori]:checked').length >= 5) {
this.checked = false;
alert('Hanya boleh memilih maksimal 4 kategori !');
}
});
</script>
</html>
- Jika sudah simpan terlebih dahulu file index.html tersebut dan lihat hasilnya dibrowser kesayangan kalian.
Sampai disini penjelasan saya mengenai cara membatasi checked checkbox dengan jquery, semoga bermanfaat.