Devre Dışı Radyo Düğmelerini Etkinleştirme: Adım Adım Kılavuz

Web formları ile çalışırken, kullanıcı etkileşimlerine dayalı olarak giriş alanlarını dinamik olarak etkinleştirme veya devre dışı bırakma gerektiği durumlarla karşılaşmak yaygındır. Bu durumlardan biri, bir açılır menüdeki seçime bağlı olarak radyo düğmeleri nin etkinleştirilmesi veya devre dışı bırakılması gerektiğidir. Farklı tarayıcılar arasında, özellikle Internet Explorer ile Firefox (FF) veya Safari gibi diğerleri arasında tutarsızlıklar yaşadıysanız, yalnız değilsiniz. Bu blog gönderisi, radyo düğmelerinizin kullanıcının kullandığı tarayıcı ne olursa olsun doğru bir şekilde davranmasını sağlamak için bir çözüm ile sizi yönlendirecektir.

Sorun

Orijinal kodda, radyo düğmeleri, kullanıcı açılır menüden bir seçenek seçtiğinde devre dışı bırakılacak veya etkinleştirilecek şekilde tasarlanmıştır. Bu işlevsellik Internet Explorer’da sorunsuz çalışırken, Firefox ve Safari gibi diğer tarayıcılarda, özellikle kullanıcıların farenin yerine klavyeyle gezinmesi durumunda sorunlar yaşanmaktadır. Radyo düğmelerinin devre dışı bırakılması veya etkinleştirilmesi, sayfanın başka bir yerinde ek bir tıklama yapıldıktan sonra etkili olur. Bu beklenmedik davranış, kullanıcılar için kafa karışıklığına yol açabilir.

Kod Örneği

İşte tipik olarak bulacağınız başlangıç kodunun basitleştirilmiş bir versiyonu:

<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="">Birini Seçin</option>
    <option value="58" user_is_tsm="0">Her iki radyo düğmesini etkinleştir</option>
    <option value="157" user_is_tsm="1">2 radyo düğmesini devre dışı bırak</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" />Diğer&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Her ikisi
  <br/><br/>
  <input type="button" class="buttonStyle" value="Talebi Gönder" />
</form>

Çözüm

Tutarsızlıkları gidermek ve tarayıcı uyumluluğunu artırmak için, select elemanının klavye olaylarına da yanıt verecek şekilde geliştirebiliriz. Özellikle, bir keyup olay işleyici eklemek, kodun yalnızca açılır menünün fareyle değiştiğinde değil, aynı zamanda klavye ile gezindiğinde de tetiklenmesine olanak tanır.

Güncellenmiş Kod

Gerekli değişiklikleri nasıl gerçekleştireceğinizi aşağıda bulabilirsiniz:

1. Bir onkeyup olayı ekleme: Bu, kullanıcı bir tuşa bastıktan sonra select kutusuyla etkileşimde bulunduğunda SetLocationOptions fonksiyonunu çağıracaktır.

<select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">

Tam JavaScript Fonksiyonu

Bağlam olarak, işte güncellenmiş HTML ile birlikte SetLocationOptions fonksiyonunun tamamı:

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  
  // Seçilen öğe indeksini kontrol et
  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="">Birini Seçin</option>
    <option value="58" user_is_tsm="0">Her iki radyo düğmesini etkinleştir</option>
    <option value="157" user_is_tsm="1">2 radyo düğmesini devre dışı bırak</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" />Diğer&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Her ikisi
  <br/><br/>
  <input type="button" class="buttonStyle" value="Talebi Gönder" />
</form>

Sonuç

onkeyup olay işleyicisini uygulayarak, radyo düğmelerinizin kullanıcı açılır menü ile etkileşimde bulunsa da, klavye ile etkileşimde bulunsa da doğru bir şekilde etkinleştirilip devre dışı bırakıldığından emin olabilirsiniz. Bu küçük ayarlama, kullanıcı deneyimini önemli ölçüde artırabilir ve farklı web tarayıcılarında tutarlı bir etkileşim modeli sunabilir.

Bu güncellenmiş örneği ortamınızda test etmekten çekinmeyin ve daha akıcı, daha güvenilir bir kullanıcı deneyiminin tadını çıkarın!