Membuat Checkbox Disabled Setelah Klik dan Tombol Submit

Alhamdulillah, akhirnya selesai juga code ini setelah melakukan eksperimen kurang lebih 1 jam lamanya. Maklum masih pemula soal javascript dan CSS hehe.

Penasaran dengan apa yang baru saja saya buat? Yuk simak dulu Demo terlebih dahulu dibawah ini:
Saya setuju dengan syarat dan ketentuan ini.


Perhatikan kotak diatas, arahkan kursor ke tombol Daftar, tidak bisa kan?
Sekarang silahkan di checklist kotak yang kecil itu, maka tombol langsung aktif.
Selanjutnya klik tombol Daftar, maka akan tampil animasi loading dan tombol Daftar menghilang.

Setelah mencoba demo diatas, kira-kira apa Anda sudah tahu kinerja kode-kode yang akan saya berikan.

Jika masih belum tahu silahkan baca lebih lanjut penjelasan saya dibawah:

Pada intinya, disini saya ingin menunjukkan cara menghilangkan dan memunculkan objek tertentu setelah ada yang berkomunikasi menggunakan beberapa kode yang disediakan.

Disini saya khususkan untuk Anda yang ingin membuat atau memodifikasi tombol register atau daftar menggunakan javascript agar mereka membaca atau mengerti dengan syarat dan ketentuan sebelum mulai bergabung dengan program yang Anda buat.

Dengan mengklik Daftar, berarti mereka setuju dengan peraturan-peraturan yang ada didalamnya, dan seharusnya sadar maupun tidak mereka seharusnya sudah tahu atau sudah membacanya.

Untuk memasangnya kedalam blog, silahkan gunakan kode-kode ini.

HTML
<div id='KS_Box'>
<div id='KS_Pernyataan'><input id="KS_Setuju" type='checkbox' onclick='KS_OKE();'/> Saya setuju dengan syarat dan ketentuan ini.</div>
<span class='KS_ButtonGo'>
<button id='KS_Goo' onclick='KS_Animasi();' disabled>Daftar</button>
<span id="KS_Animasi" style="display:none"></span>
</span>
</div>

JAVASCRIPT
<script type='text/javascript'>
<!-- Javascript Created by: Kangsigit.com -->
document.getElementById('KS_Goo').disabled = true; //Tombol daftar belum berfungsi
function KS_OKE() { //Membuat fungsi untuk checkbox
document.getElementById('KS_Setuju').disabled = true; //Tombol checkbox belum berfungsi
document.getElementById('KS_Goo').disabled = false; //Tombol daftar sudah berfungsi
}
function KS_Animasi() { //Membuat fungsi untuk animasi loading
document.getElementById('KS_Goo').style.display = 'none'; //Tombol daftar menghilang setelah animasi muncul
document.getElementById('KS_Animasi').style.display = 'block'; //Animasi muncul setelah tombol Daftar di klik
}
</script>

CSS/ STYLE
<style>
#KS_Animasi{width:200px;height:200px;margin-top:15px;background-color:#F0F0F4;border-radius:100px;background-image:url(http://1.bp.blogspot.com/-3cI8cet_mzg/VXQldbXDPkI/AAAAAAAAB4M/Y5V4NfMhYqs/s1600/Kangsigit.com-loading.gif)}
#KS_Goo{margin-top:10px;margin-left:25px;}
#KS_Box{background:rgb(95, 95, 113);padding:20px;}
.KS_ButtonGo{width:500px;margin:0 auto}
#KS_Pernyataan{color:#fff}
button,button[disabled]:active{background-color:#464646;font:bold 11px Sans-Serif;color:#fff;border:none;border-radius:3px;cursor:pointer;padding:5px 10px}
button:hover{background-color:#A8A8A8;color:#000}
button:active{background-color:#A8A8A8;color:#000}
button[disabled],button[disabled]:active{background-color:#A8A8A8;color:#000;cursor:default}
</style>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini