Javascript Html Radio Button

Cara Mengaktifkan Tombol Radio yang Dinonaktifkan: Panduan Langkah-demi-Langkah

Saat bekerja dengan formulir web, umum untuk menemui skenario di mana Anda perlu mengaktifkan atau menonaktifkan bidang input secara dinamis berdasarkan interaksi pengguna. Salah satu situasi tersebut melibatkan tombol radio yang harus diaktifkan atau dinonaktifkan berdasarkan pilihan yang dibuat pada menu dropdown. Jika Anda mengalami ketidak konsistenan di berbagai browser, terutama antara Internet Explorer dan browser lainnya seperti Firefox (FF) atau Safari, Anda tidak sendirian. Pos blog ini akan memandu Anda melalui solusi untuk memastikan tombol radio Anda berfungsi dengan benar, terlepas dari browser yang digunakan.

Masalah

Dalam kode asli, tombol radio dirancang untuk dinonaktifkan atau diaktifkan ketika pengguna memilih opsi dari menu dropdown. Sementara fungsionalitas ini bekerja tanpa masalah di Internet Explorer, ia terganggu di browser lain seperti Firefox dan Safari—terutama ketika pengguna bernavigasi dengan keyboard daripada mouse. Penonaktifan atau pengaktifan tombol radio hanya mulai berlaku setelah klik tambahan di tempat lain pada halaman. Perilaku yang tidak terduga ini dapat menyebabkan kebingungan bagi pengguna.

Contoh Kode

Berikut adalah versi sederhana dari kode awal yang biasanya Anda temukan:

<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="">Pilih Satu</option>
    <option value="58" user_is_tsm="0">Aktifkan kedua tombol radio</option>
    <option value="157" user_is_tsm="1">Nonaktifkan 2 tombol radio</option>
  </select>
  <br/><br/>
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="fund_amount2" />Lainnya&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Keduanya
  <br/><br/>
  <input type="button" class="buttonStyle" value="Kirim Permintaan" />
</form>

Solusi

Untuk menangani ketidak konsistenan dan meningkatkan kompatibilitas browser, kita bisa meningkatkan elemen select agar juga merespons peristiwa keyboard. Secara khusus, menambahkan penangan peristiwa keyup memungkinkan kode untuk dipicu tidak hanya ketika dropdown berubah melalui mouse, tetapi juga ketika dinavigasi menggunakan keyboard.

Kode yang Diperbarui

Berikut adalah cara menerapkan perubahan yang diperlukan:

  1. Menambahkan peristiwa onkeyup: Ini akan memanggil fungsi SetLocationOptions setiap kali pengguna melepaskan sebuah tombol setelah berinteraksi dengan kotak select.
<select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">

Fungsi JavaScript Lengkap

Untuk konteks, berikut adalah fungsi SetLocationOptions lengkap beserta HTML yang diperbarui:

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  
  // Memeriksa indeks opsi yang dipilih
  if (selTemp.selectedIndex >= 0) {
    var myOpt = selTemp.options[selTemp.selectedIndex];
    if (myOpt.attributes[0].nodeValue == '1') {
      frmTemp.transfer_to[0].disabled = true;
      frmTemp.transfer_to[1].disabled = true;
      frmTemp.transfer_to[2].checked = true;
    } else {
      frmTemp.transfer_to[0].disabled = false;
      frmTemp.transfer_to[1].disabled = false;
    }
  }
}

<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">
    <option value="">Pilih Satu</option>
    <option value="58" user_is_tsm="0">Aktifkan kedua tombol radio</option>
    <option value="157" user_is_tsm="1">Nonaktifkan 2 tombol radio</option>
  </select>
  <br/><br/>
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="fund_amount2" />Lainnya&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Keduanya
  <br/><br/>
  <input type="button" class="buttonStyle" value="Kirim Permintaan" />
</form>

Kesimpulan

Dengan menerapkan penangan peristiwa onkeyup, Anda dapat memastikan bahwa tombol radio Anda diaktifkan atau dinonaktifkan dengan benar, terlepas dari apakah pengguna berinteraksi dengan dropdown melalui mouse atau keyboard. Penyesuaian kecil ini dapat secara signifikan meningkatkan pengalaman pengguna dan memberikan model interaksi yang konsisten di berbagai browser web.

Silakan coba contoh yang diperbarui ini di lingkungan Anda dan nikmati pengalaman pengguna yang lebih halus dan dapat diandalkan!