2008-08-08 17 views
10

El siguiente código funciona muy bien en IE, pero no en FF o Safari. No puedo entender por qué. El código es supuesto para deshabilitar botones de opción si selecciona la opción "Deshabilitar 2 botones de opción". Debería habilitar los botones de opción si selecciona la opción "Habilitar ambos botones de opción". Ambos funcionan ...¿Cómo puedo activar los botones de radio desactivados?

Sin embargo, si no usa el mouse para moverse entre las 2 opciones ("Habilitar ..." y "Deshabilitar ..."), entonces los botones de selección no parecen estar deshabilitado o habilitado correctamente, hasta que haga clic en cualquier otro lugar en la página (no en los botones de radio mismos).

Si alguien tiene tiempo/es curioso/se siente útil, pegue el siguiente código en una página html y cárguela en un navegador. Funciona muy bien en IE, pero el problema se manifiesta en FF (3 en mi caso) y Safari, todo en 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, esto está funcionando en IE10 y FF: [violín] (http: //jsfiddle.net/K6cAu/1/) – akinuri

Respuesta

3

Para que FF imite el comportamiento de IE al usar el teclado, puede usar el evento de teclado en el cuadro de selección. En su ejemplo (no soy un fan de fijación de controladores de eventos de esta manera, pero eso es otro tema), sería así:

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

Bueno, IE tiene un modelo de objetos algo no estándar; lo que estás haciendo no debería funcionar, pero te estás saliendo con la tuya porque IE es amable contigo. En Firefox y Safari, document.frm en su código se evalúa como indefinido.

Debe usar valores de identificación en sus elementos de formulario y usar document.getElementById('whatever') para devolver una referencia a ellos en lugar de referirse a propiedades inexistentes del objeto de documento.

Así que esto funciona un poco mejor y puede hacer lo que está buscando:

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

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

Pero es posible que desee echa un vistazo a este excelente libro si desea obtener más información sobre la forma correcta de hacer las cosas : DOM Scripting por Jeremy Keith

también ya que estamos en el tema, Bulletproof Ajax por el mismo autor también es merecedor de un lugar en su biblioteca como es JavaScript: The Good Parts por Doug Crockford

1

por qué no g rab una de las bibliotecas de scripting de AJAX, abstrae mucho de la magia negra de script DOM DOM y hace la vida muchísimo más fácil.

Cuestiones relacionadas