Enable/disable Button Based On Multiple Checkbox In Javascript

MUAZHAN

4 min read

·

Jun 19, 2024

62

Share

Cara Mengaktifkan/Menonaktifkan Tombol Berdasarkan Beberapa Checkbox di JavaScript

Dalam pengembangan web, seringkali kita perlu mengontrol elemen HTML berdasarkan keadaan elemen lain. Salah satu contohnya adalah mengizinkan pengguna untuk mengaktifkan tombol hanya jika mereka telah memilih beberapa kotak centang (checkbox). Artikel ini akan memandu Anda tentang cara menerapkan fitur ini menggunakan JavaScript.

Konsep Dasar

1. Elemen HTML: Kita akan membutuhkan beberapa kotak centang dan sebuah tombol.
2. Event Listener: Kita akan menggunakan event listener untuk memantau perubahan pada kotak centang.
3. Logika Kondisi: JavaScript akan mengevaluasi status kotak centang dan mengaktifkan/menonaktifkan tombol berdasarkan kondisi yang ditentukan.

Implementasi

Berikut contoh kode HTML dan JavaScript untuk mengaktifkan tombol jika minimal dua kotak centang dipilih:

  
Pilih Item

  
  Item 1


  
  Item 2


  
  Item 3


  Submit

  

Penjelasan Kode:

1. Elemen HTML: Kode HTML di atas mendefinisikan tiga kotak centang dan satu tombol dengan ID "submitBtn".
2. Event Listener: checkboxes.forEach() iterasi melalui semua kotak centang dan menambahkan event listener 'change' ke setiap checkbox.
3. Logika Kondisi: Event listener akan menjalankan fungsi yang menghitung jumlah kotak centang yang dicentang. Jika jumlahnya sama dengan atau lebih besar dari 2, tombol "submitBtn" akan diaktifkan (disabled = false). Jika tidak, tombol akan dinonaktifkan (disabled = true).

Penyesuaian

Anda dapat menyesuaikan kode ini untuk memenuhi kebutuhan khusus Anda:

• Jumlah Minimum Checkbox: Ubah nilai checkedCount >= 2 untuk menentukan jumlah minimal kotak centang yang harus dicentang untuk mengaktifkan tombol.
• Aksi Tombol: Anda dapat menambahkan fungsi ke tombol untuk menjalankan aksi tertentu, seperti mengirim form atau menampilkan pesan.

Kesimpulan

Dengan menerapkan logika JavaScript sederhana, Anda dapat mengontrol status tombol berdasarkan status beberapa kotak centang. Ini adalah teknik umum yang dapat diterapkan dalam berbagai skenario pengembangan web.