javascript - les - input type radio checked




Comment puis-je activer les boutons radio désactivés? (2)

Le code suivant fonctionne très bien dans IE, mais pas dans FF ou Safari. Je ne peux pas pour la vie de moi expliquer pourquoi. Le code est censé désactiver les boutons radio si vous sélectionnez l'option "Désactiver 2 boutons radio". Il devrait activer les boutons radio si vous sélectionnez l'option "Activer les deux boutons radio". Ces deux fonctionnent ...

Cependant, si vous n'utilisez pas votre souris pour vous déplacer entre les deux options ("Activer ..." et "Désactiver ..."), les boutons radio ne semblent pas être désactivés ou activés correctement, jusqu'à ce que vous cliquiez ailleurs sur la page (pas sur les boutons radio eux-mêmes).

Si quelqu'un a le temps / est curieux / se sentir utile, s'il vous plaît coller le code ci-dessous dans une page HTML et le charger dans un navigateur. Cela fonctionne très bien dans IE, mais le problème se manifeste dans FF (3 dans mon cas) et Safari, tous sur Windows XP.

<html>
  <head>
    <script language="javascript">
      function SetLocationOptions() {
        var frmTemp = document.frm;
        var selTemp = frmTemp.user;

        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;
          }
        }
      }
    </script>
  </head>

  <body>
    <form name="frm" action="coopfunds_transfer_request.asp" method="post">
      <select name="user" onchange="javascript: SetLocationOptions()">
        <option value="" />Choose One
        <option value="58" user_is_tsm="0" />Enable both radio buttons
        <option value="157" user_is_tsm="1" />Disable 2 radio buttons
      </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" />Other&nbsp;&nbsp;&nbsp;
      <input type="radio" name="transfer_to" value="both" CHECKED />Both

      <br /><br />

      <input type="button" class="buttonStyle" value="Submit Request" />
    </form>
  </body>
</html>

Bien, IE a un modèle d'objet quelque peu non-standard; ce que vous faites ne devrait pas fonctionner mais vous vous en sortez parce que IE est gentil avec vous. Dans Firefox et Safari, document.frm de votre code est évalué à non défini.

Vous devez utiliser des valeurs id sur vos éléments de formulaire et utiliser document.getElementById('whatever') pour leur renvoyer une référence au lieu de faire référence à des propriétés inexistantes de l'objet document.

Donc, cela fonctionne un peu mieux et peut faire ce que vous cherchez:

Line 27: <form name="frm" id="f" ...

Line 6: var frmTemp = document.getElementById('f');

Mais vous voudrez peut-être consulter cet excellent livre si vous voulez en savoir plus sur la bonne façon de faire les choses: DOM Scripting par Jeremy Keith

Aussi pendant que nous sommes sur le sujet, Bulletproof Ajax par le même auteur mérite également une place sur votre étagère comme JavaScript: The Good Parts par Doug Crockford


Pour que FF imite le comportement d'IE lors de l'utilisation du clavier, vous pouvez utiliser l'événement keyup dans la zone de sélection. Dans votre exemple (je ne suis pas un fan de l'attachement des gestionnaires d'événements de cette façon, mais c'est un autre sujet), ce serait comme ceci:

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




radio-button