Bootstrap Checkbox & Radio States (Enabled / Disabled)

Postingan ini melanjutkan postingan sebelumnya tentang cara membuat Checkbox dan Radio yang responsive (horizontal & vertikal) di Bootstrap, kali ini kita akan membahas tentang state / states dari Checkbox dan Radio itu sendiri. Secara default, ketika membuat Checkbox dan Radio tentu akan dapat dicentang / dipilih dengan bebas. States akan menentukan apakah Checkbox dan Radio tersebut dinonaktifkan sehingga tidak dapat dicentang / dipilih.

Tidak berbeda jauh dengan elemen lainnya pada Bootstrap, cukup gunakan class disabled maka Checkbox dan Radio tidak dapat dicentang / dipilih. Pada beberapa kondisi, disabled dibutuhkan agar tidak dapat dipilih / dicentang. Misalnya pada pilihan kategori, hanya beberapa kategori saja yang dapat dipilih, kategori (Checkbox yang menggunakan class disabled tidak dapat dipilih).

<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Checkbox Tidak Dapat Dipilih</label>
</div>

Struktur pembuatannya tetap sama, hanya saja pada bagian class checkbox ditambah class disabled seperti yang terlihat pada kode di atas. Dengan struktur seperti ini maka Checkbox tersebut tidak dapat dicentang melainkan memiliki warna buram dan menampilkan ikon merah ketika disentuh mouse pointer.

Begitu juga pada Radio, gunakan class disabled agar Radio tidak dapat dipilih. Ini biasanya digunakan pada pemilihan jenis kelamin, kelas, dsb.

<div class="radio disabled">
  <label><input type="radio" name="" disabled>Radio Tidak Dapat Dipilih</label>
</div>

Warnanya pun akan cenderung lebih pudar ketimbang Radio lain yang tidak menggunakan class disabled,  menandakan bahwa Radio ini tidak dapat dipilih.

Loading...

Lihat Post Lainnya:
Komentar
Memuat...

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi