2008-08-08 13 views
10

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 supposé pour 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 ...Comment puis-je activer les boutons radio désactivés?

Cependant, si vous n'utilisez pas votre souris pour vous déplacer entre les 2 options ("Activer ..." et "Désactiver ..."), les boutons radio ne semblent pas être désactivé ou activé correctement, jusqu'à ce que vous cliquiez n'importe où 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 collez 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> 
+0

Umm, cela fonctionne dans IE10 et FF: [violon] (http: //jsfiddle.net/K6cAu/1/) – akinuri

Répondre

3

Pour que FF imite le comportement d'IE lors de l'utilisation du clavier, vous pouvez utiliser l'événement de manipulation dans la zone de sélection. Dans votre exemple (je ne suis pas fan d'attacher 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()"> 
3

Eh 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 y 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 êtes après:

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

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

Mais vous pouvez 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 est également digne d'une place sur votre étagère tout comme JavaScript: The Good Parts par Doug Crockford

1

Pourquoi ne pas g rab une des librairies de scripts AJAX, ils font abstraction d'une grande partie de la magie noire des scripts DOM et rendent la vie beaucoup plus facile.

Questions connexes