Menambahkan Atribut disabled pada Elemen HTML dengan JavaScript
Atribut disabled dalam HTML digunakan untuk menonaktifkan elemen tertentu, seperti tombol, kotak teks, dan dropdown. Dengan menonaktifkan elemen, pengguna tidak dapat berinteraksi dengannya.
Anda dapat menambahkan atribut disabled ke elemen HTML menggunakan JavaScript dengan dua cara:
1. Menggunakan atribut disabled secara langsung
Anda dapat menambahkan atribut disabled secara langsung ke elemen HTML menggunakan properti setAttribute() pada objek elemen.
Contoh:
// Mendapatkan elemen tombol dengan ID "myButton"
const myButton = document.getElementById("myButton");
// Menambahkan atribut "disabled" ke tombol
myButton.setAttribute("disabled", "");
Kode di atas akan menonaktifkan tombol dengan ID "myButton".
2. Menggunakan properti disabled
Anda juga dapat menambahkan atribut disabled dengan menggunakan properti disabled pada objek elemen.
Contoh:
// Mendapatkan elemen tombol dengan ID "myButton"
const myButton = document.getElementById("myButton");
// Menonaktifkan tombol
myButton.disabled = true;
Kode di atas juga akan menonaktifkan tombol dengan ID "myButton".
Menambahkan dan Menghapus Atribut disabled
Anda juga dapat menggunakan kedua metode di atas untuk menghapus atribut disabled dari elemen.
Untuk menghapus atribut disabled menggunakan setAttribute(), Anda dapat menggunakan metode removeAttribute().
// Menghapus atribut "disabled" dari tombol
myButton.removeAttribute("disabled");
Untuk menghapus atribut disabled menggunakan properti disabled, Anda dapat mengatur nilainya menjadi false.
// Mengaktifkan tombol
myButton.disabled = false;
Kapan Menggunakan Atribut disabled?
Atribut disabled dapat digunakan dalam berbagai skenario:
- Mencegah interaksi pengguna selama proses tertentu: Misalnya, saat formulir sedang diproses, Anda dapat menonaktifkan tombol submit untuk mencegah pengguna mengirimkan formulir berkali-kali.
- Menghindari interaksi yang tidak diinginkan: Misalnya, Anda dapat menonaktifkan tombol "Hapus" jika tidak ada data yang dipilih.
- Menampilkan elemen sebagai tidak tersedia: Misalnya, Anda dapat menonaktifkan elemen formulir yang tidak diperlukan dalam kondisi tertentu.
Dengan menggunakan atribut disabled dengan JavaScript, Anda dapat membuat antarmuka pengguna yang lebih responsif dan terkontrol.