Comment Activer les Boutons Radio Désactivés : Un Guide Étape par Étape

Lorsque vous travaillez avec des formulaires Web, il est courant de rencontrer des situations où vous devez activer ou désactiver dynamiquement les champs de saisie en fonction des interactions de l’utilisateur. L’une de ces situations concerne les boutons radio qui doivent être activés ou désactivés en fonction de la sélection effectuée dans un menu déroulant. Si vous avez observé des incohérences entre différents navigateurs, en particulier entre Internet Explorer et d’autres comme Firefox (FF) ou Safari, vous n’êtes pas seul. Cet article de blog vous guidera à travers une solution pour garantir que vos boutons radio se comportent correctement, quel que soit le navigateur utilisé.

Le Problème

Dans le code d’origine, les boutons radio sont conçus pour être désactivés ou activés lorsque l’utilisateur sélectionne une option dans un menu déroulant. Bien que cette fonctionnalité fonctionne parfaitement sur Internet Explorer, elle est défaillante dans d’autres navigateurs comme Firefox et Safari—surtout lorsque les utilisateurs naviguent avec le clavier plutôt qu’avec la souris. La désactivation ou l’activation des boutons radio ne prend effet qu’après un clic supplémentaire ailleurs sur la page. Ce comportement inattendu peut provoquer de la confusion chez les utilisateurs.

Exemple de Code

Voici une version simplifiée du code initial que vous rencontreriez normalement :

<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="">Choisir un</option>
    <option value="58" user_is_tsm="0">Activer les deux boutons radio</option>
    <option value="157" user_is_tsm="1">Désactiver 2 boutons 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" />Autre&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Les deux
  <br/><br/>
  <input type="button" class="buttonStyle" value="Soumettre la Demande" />
</form>

La Solution

Pour remédier à l’incohérence et améliorer la compatibilité entre navigateurs, nous pouvons améliorer l’élément select afin qu’il réponde également aux événements du clavier. Plus précisément, l’ajout d’un gestionnaire d’événements keyup permet au code de se déclencher non seulement lorsque le menu déroulant change via la souris, mais aussi lorsqu’il est navigué en utilisant le clavier.

Code Mis à Jour

Voici comment mettre en œuvre les changements nécessaires :

1. Ajouter un événement onkeyup : Cela appellera la fonction SetLocationOptions chaque fois que l’utilisateur relâche une touche après avoir interagi avec la boîte select.

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

Fonction JavaScript Complète

Pour donner du contexte, voici la fonction complète SetLocationOptions accompagnée du HTML mis à jour :

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  
  // Vérifiez l'index de l'option sélectionnée
  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="">Choisir un</option>
    <option value="58" user_is_tsm="0">Activer les deux boutons radio</option>
    <option value="157" user_is_tsm="1">Désactiver 2 boutons 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" />Autre&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Les deux
  <br/><br/>
  <input type="button" class="buttonStyle" value="Soumettre la Demande" />
</form>

Conclusion

En mettant en œuvre le gestionnaire d’événements onkeyup, vous pouvez vous assurer que vos boutons radio sont correctement activés ou désactivés, que l’utilisateur interagisse avec le menu déroulant via la souris ou le clavier. Ce petit ajustement peut considérablement améliorer l’expérience utilisateur et fournir un modèle d’interaction cohérent entre les différents navigateurs Web.

N’hésitez pas à tester cet exemple mis à jour dans votre environnement et à profiter d’une expérience utilisateur plus fluide et plus fiable !