Pada kesempatan kali ini saya akan menjelaskan cara membuat validasi minimal checkbox dengan jquery. Perlu teman-teman ketahui sebelumnya, pada contoh kasus yang akan saya jelaskan disini adalah dimana saya akan membuat validasi minimal checkbox dengan jquery yang apabila dari checkbox tersebut tidak dipilih atau dicentang sebanyak 3 checkbox, maka tombol simpan tersebut akan disabled atau nonaktif. Begitupun sebaliknya, apabila checkbox tersebut dipilih atau dicentang sebanyak 3 checkbox atau lebih dari itu, maka tombol simpan tersebut akan enabled atau aktif dan bisa di tekan.
Dan jika tombol simpan tersebut menjadi Disabled, maka mau tidak mau mengharuskan user atau pengguna untuk memilih checkbox tersebut paling sedikitnya 3 checkbox, karena tombol simpan tersebut tidak akan bisa ditekan untuk melakukan aksi submit untuk mengirim data yang belum terpenuhi.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file html dengan nama index.html
- Jika sudah selanjutnya ketikan seperti kode berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Validasi Minimal Checkbox Dengan Jquery</title> </head> <body> <h3>Pilih Bulan (Month)</h3> <form action="" method="post"> <input type="checkbox" name="month[]" id="month" value="january">January <input type="checkbox" name="month[]" id="month" value="february">February <input type="checkbox" name="month[]" id="month" value="march">March <input type="checkbox" name="month[]" id="month" value="april">April <input type="checkbox" name="month[]" id="month" value="may">May <input type="checkbox" name="month[]" id="month" value="june">June <input type="checkbox" name="month[]" id="month" value="july">July <input type="checkbox" name="month[]" id="month" value="august">August <input type="checkbox" name="month[]" id="month" value="september">September <input type="checkbox" name="month[]" id="month" value="october">October <input type="checkbox" name="month[]" id="month" value="november">November <input type="checkbox" name="month[]" id="month" value="december">December <input type="submit" name="save" value="Simpan" disabled=""> </form> </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) { var month = $('input[id=month]:checked'); if(month.length <= 2){ $("input[name=save]").prop("disabled", true); }else{ $("input[name=save]").prop("disabled", false); } }); </script> </html> |
- Selanjutnya jika sudah simpan terlebih dahulu file index.html tersebut, dan lihat hasilnya dibrowser kesayangan kalian.
Sampai disini penjelasan saya mengenai cara membuat validasi minimal checkbox dengan jquery, semoga bermanfaat.