Add Disabled Attribute Dynamically Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

45

Share

Menambahkan Atribut "disabled" secara Dinamis dengan JavaScript

Membuat elemen HTML menjadi tidak aktif atau "disabled" dapat dilakukan dengan menambahkan atribut disabled secara dinamis menggunakan JavaScript. Ini sangat berguna dalam berbagai skenario, seperti:

• Memblokir input sementara: Menghentikan pengguna dari memasukkan data selama proses tertentu, seperti saat sedang melakukan validasi form.
• Mencegah interaksi: Menonaktifkan tombol atau elemen lain untuk mencegah tindakan yang tidak diinginkan hingga syarat tertentu terpenuhi.
• Membuat form non-editable: Mengubah form menjadi hanya-baca untuk menampilkan informasi yang tidak dapat diubah oleh pengguna.

Cara Menambahkan Atribut "disabled"

Anda dapat menambahkan atribut disabled ke elemen HTML dengan menggunakan salah satu dari metode berikut:

1. Menggunakan setAttribute():

let myButton = document.getElementById("myButton");

// Menambahkan atribut "disabled"
myButton.setAttribute("disabled", "");

// Untuk menghapus atribut "disabled"
myButton.removeAttribute("disabled"); 

2. Mengubah atribut disabled secara langsung:

let myInput = document.getElementById("myInput");

// Menambahkan atribut "disabled"
myInput.disabled = true;

// Untuk menghapus atribut "disabled"
myInput.disabled = false;

3. Menggunakan JavaScript inline:

Click Me

Contoh Penggunaan: Menonaktifkan Tombol Setelah Diklik

Berikut adalah contoh skrip JavaScript yang menonaktifkan tombol setelah diklik:

Click Me

Kode di atas menambahkan event listener ke tombol myButton. Ketika tombol diklik, fungsi di dalam event listener akan menonaktifkan tombol tersebut.

Catatan

• Atribut disabled dapat digunakan pada berbagai elemen HTML, seperti tombol (<button>), input (<input>), area teks (<textarea>), dan lainnya.
• Mengatur atribut disabled ke true akan membuat elemen tidak dapat diinteraksi.
• Mengatur atribut disabled ke false atau menghapusnya akan mengaktifkan kembali elemen.

Dengan menambahkan atribut disabled secara dinamis menggunakan JavaScript, Anda dapat meningkatkan interaksi pengguna pada situs web Anda, membuat pengalaman yang lebih responsif dan intuitif.