Menambahkan Atribut 'disabled' ke Elemen HTML dengan JavaScript
Artikel ini akan membahas cara menambahkan atribut 'disabled' ke elemen HTML menggunakan JavaScript. Atribut 'disabled' digunakan untuk menonaktifkan elemen HTML, seperti tombol, kotak teks, dan kotak centang. Ini akan mencegah pengguna berinteraksi dengan elemen tersebut.
Cara Menambahkan Atribut 'disabled' dengan JavaScript
Ada beberapa cara untuk menambahkan atribut 'disabled' ke elemen HTML menggunakan JavaScript:
1. Menggunakan setAttribute()
Metode ini paling umum digunakan untuk menambahkan atau mengubah atribut HTML pada elemen. Berikut adalah contoh:
const myButton = document.getElementById("myButton");
// Menonaktifkan tombol
myButton.setAttribute("disabled", "");
// Mengaktifkan kembali tombol
myButton.removeAttribute("disabled");
Kode Penjelasan:
document.getElementById("myButton"): Seleksi elemen dengan id "myButton".setAttribute("disabled", ""): Menambahkan atribut "disabled" ke elemen.removeAttribute("disabled"): Menghapus atribut "disabled" dari elemen.
2. Menggunakan disabled Property
Metode ini khusus untuk atribut 'disabled'. Berikut adalah contoh:
const myInput = document.getElementById("myInput");
// Menonaktifkan input
myInput.disabled = true;
// Mengaktifkan kembali input
myInput.disabled = false;
Kode Penjelasan:
document.getElementById("myInput"): Seleksi elemen dengan id "myInput".myInput.disabled = true;: Menambahkan atribut 'disabled' ke elemen.myInput.disabled = false;: Menghapus atribut 'disabled' dari elemen.
Contoh Penggunaan:
Menambahkan Atribut 'disabled' dengan JavaScript
Kode ini akan menonaktifkan tombol dan kotak teks setelah tombol diklik.
Kesimpulan
Menambahkan atribut 'disabled' ke elemen HTML dengan JavaScript sangat mudah. Metode setAttribute() dan disabled property menawarkan fleksibilitas dalam menonaktifkan dan mengaktifkan elemen. Anda dapat menggunakan metode ini untuk mengontrol interaksi pengguna dengan elemen HTML secara dinamis.