checkBox.checked no funciona en IE8

ninonna · #1 (**permalink**) 18/11/2010, 11:09

Buenas,
Tengo el siguente problema, el checkbox creado en un zend_form:

Código PHP:

      $this->addElement( 
                        'checkbox', 
                        'esexitus', 
        array('required' => false, 'checked'=>0, 'label' => 'Éxitus', 'onclick'=>'gestioExitus()') 
        );

En el html se muestra el checkbox:
...

Código HTML:

 <?php echo $form->esexitus->renderLabel(). $form->esexitus->renderViewHelper() ?>

...

Desde javascript consulto el estado del checkbox, y segun el que sea, habilito text o no:

Código:

exitus= document.getElementById('esexitus');
if(exitus.checked==true) document.getElementById('dataexitus').disabled=false;

En Firefox, funciona perfectamente pero en IE8 no, he puesto un alert para consultar la propiedad checked, pero siempre retorna 'false'.
Estube foreando, en algunos casos se recomendó usar onClick y no OnChange, y ya lo estoy haciendo, también que se visualizara la pagina en modo compatibilidad y tambien lo hago, pero nada, no consigo obtener el estado del checkbox en IE8.
Cualquier ayuda es agradecida!!
saludos

Panino5001 · #2 (**permalink**) 18/11/2010, 11:35

Te sugiero que muestres el código html resultante de tu script php, para que tu mensaje sea más claro. También te sugiero que expliques mejor el problema y tu objetivo.

ninonna · #3 (**permalink**) 18/11/2010, 12:44

Perdon! quizas fuí desasiado escueta..
Tengo un campo de texto que habilio/desabilito segun si el checkbox 'esexitus' está marcado o no.
Cada vez que se hace un clic sobre el checkbox ejecuto la función javascript (mediante el evento onClick) :

Código:

function gestioExitus(){
exitus= document.getElementById('esexitus');
	if(exitus.checked==true) document.getElementById('dataexitus').disabled=false;
	else document.getElementById('dataexitus').disabled=true;
}

La llamada al mètodo funciona, se ejecuta tantas veces como clicks sobre el checkbox, el problema es que en IE8 al realizar la comprobación de si el checkbox está marcado:

Código:

 if( 'exitus.checked'

... siempre devuelve 'false' sea cual sea el estado del checkbox(marcado/nomarcado)
Este mismo código funciona perfectamente en Firefox.
Adjunto el html resultante:

Código HTML:

<html>
	<head>
	    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><title>GestNED</title><link href="/css/cssfront.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="/css/gestned.css" media="screen" rel="stylesheet" type="text/css" />	
	
		<script language="JavaScript"> 
			function gestioExitus(){
			alert('entra');
			exitus= document.getElementById('esexitus');
			alert(exitus);alert(exitus.checked);
			if(exitus.checked==true) document.getElementById('dataexitus').disabled=false;
			else document.getElementById('dataexitus').disabled=true;
			} 
		</script>
	
	</head>
 
	<body class="in">  
	   <div id="in" class="in">
			<form name="PacientFitxaAlta" id="PacientFitxaAlta" method="post" action="index" >    
				<table id="tauAltaDadesPersonalsPac" class="tauAltaDadesPersonalsPac campsform"> 	
					<tr>
						<td><label for="cognom2" class="optional">2on Cognom</label>
							<input type="text" name="cognom2" id="cognom2" value="" size="24" maxlength="200" /> </td>
						<td> <label for="esexitus" class="optional">Éxitus</label>
							<input type="hidden" name="esexitus" value="0" /><input type="checkbox" name="esexitus" id="esexitus" value="1" onclick="gestioExitus()" /> <label for="dataexitus" class="optional">Data defunció</label>
							<input type="text" name="dataexitus" id="dataexitus" value="" size="9" maxlength="10" disabled="1" />  
						</td>
					</tr>
				</table> 
			</form>
	 
		</div>
	</body>
</html>

Gracias!

Panino5001 · #4 (**permalink**) 18/11/2010, 13:56

Cambiale el name al campo oculto esexitus y funcionará sin problemas (explorer confunde names e ids con nombres de variable y eso te genera el conflicto porque estás usando 2 veces ese name)

ninonna · #5 (**permalink**) 18/11/2010, 14:21

Me di cuenta de esto al pegar el html, pero he estado mirando como quitar-lo y no doy con ello.. El checkbuton se añade al form mediante php, utilizo Zend Framework:
En el form que contiene los elementos de la vista:

Código PHP:

Ver original$this->addElement(
                        'checkbox',
                        'esexitus',
        array('required' => false, 'checked'=>0, 'label' => 'Éxitus', 'onclick'=>'gestioExitus()')
        );

Y Zend añade el hidden por su cuenta.. He googleado un poco, y encontre quien dice que cuando el checkbox no está marcado, el hidden se ignora.
De todas formas, copié el html sobre un notepad y le quité el elemento hidden y al ejecutar sobre IE8 sigue sin funcionar....
Alguna idea más?? ya no se que probar...
Saludos!

stramin · #6 (**permalink**) 18/11/2010, 14:31

GO! GO! ustedes pueden!

ninonna · #7 (**permalink**) 18/11/2010, 14:49

Alguna sugerencia stramin???

stramin · #8 (**permalink**) 18/11/2010, 15:23

nop, la verdad Panino5001 va mucho mejor encaminado en esto, si alguien te puede ayudar sería el.

Panino5001 · #9 (**permalink**) 18/11/2010, 15:36

Cita:

De todas formas, copié el html sobre un notepad y le quité el elemento hidden y al ejecutar sobre IE8 sigue sin funcionar....

Estás seguro de esto? Porque yo lo probé y funciona...

ninonna · #10 (**permalink**) 18/11/2010, 15:52

Pues ya no entiendo nada, a mi sigue sin funcionarme... si he quitado todo lo del hidden, el <tr> que lo contiene queda así:

Código HTML:

<tr>
	<td><label for="cognom2" class="optional">2on Cognom</label>
		<input type="text" name="cognom2" id="cognom2" value="" size="24" maxlength="200" /> </td>
	<td> <label for="esexitus" class="optional">exitus</label>
		 <input type="checkbox" name="esexitus" id="esexitus" value="1" onclick="gestioExitus()" />		  				 
		 <label for="dataexitus" class="optional">Data defunció</label>
		<input type="text" name="dataexitus" id="dataexitus" value="" size="9" maxlength="10" disabled="1" />  
	</td>
</tr>

Yo tengo la versión 8.0.7600.16385 del IE8, me puedes facilitar la tuya? podria ser debido a la versión??
Y si no es mucho pedir,puedes probar si a ti te funciona sin quitar el elemento hidden?? así descarto..
gracias!

Panino5001 · #11 (**permalink**) 18/11/2010, 20:32

Mi versión de IE es 8.07600.16385. El código con que lo acabo de probar es este:

Código PHP:

  <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8" /><title>GestNED</title><link href="/css/cssfront.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="/css/gestned.css" media="screen" rel="stylesheet" type="text/css" />    
    
        <script language="JavaScript"> 
            function gestioExitus(){
            exitus= document.getElementById('esexitus');
            alert(exitus.checked);
            if(exitus.checked==true) document.getElementById('dataexitus').disabled=false;
            else document.getElementById('dataexitus').disabled=true;
            } 
        </script>
    
    </head>
 
    <body class="in">  
       <div id="in" class="in">
            <form name="PacientFitxaAlta" id="PacientFitxaAlta" method="post" action="index" >    
                <table id="tauAltaDadesPersonalsPac" class="tauAltaDadesPersonalsPac campsform">     
                    <tr>
    <td><label for="cognom2" class="optional">2on Cognom</label>
        <input type="text" name="cognom2" id="cognom2" value="" size="24" maxlength="200" />  </td>
    <td> <label for="esexitus" class="optional">exitus</label>
         <input type="checkbox" name="esexitus" id="esexitus" value="1" onclick="gestioExitus()" />                           
         <label for="dataexitus" class="optional">Data defunció</label>
        <input type="text" name="dataexitus" id="dataexitus" value="" size="9" maxlength="10" disabled="1" />  
    </td>
</tr>
                </table> 
            </form>
     
        </div>
    </body>
</html>

Ojo, hay algo incorrecto en tu estructura html. Revisalo, porque una estructura html correcta arrancaría así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Es decir, primero el doctype y luego el tag html, y la tuya arranca de otra manera (yo hice esa corrección antes del testeo casi de manera automática).

ninonna · #12 (**permalink**) 19/11/2010, 02:40

Gracias por la corrección, no me habia dado cuenta que lo tenia al revés.. lo he cambiado, pero el estado del checkBox sigue sin funcionar. Seguí toqueteando y encontré la solución, adjunto la situación que no funciona y la que si, por si alguien se encuentra en esto..
Antes el código era:
Creación del checkbox en el Form de Zend:

Código PHP:

  $this->addElement( 
        'checkbox', 
        'esexitus', 
        array('required' => false, 'checked'=>0, 'label' => 'Éxitus', 'onclick'=>'gestioExitus()') 
        );

Se muestra el check box en la vista .html:

Código HTML:

<td> <?php echo $form->esexitus->renderLabel(). $form->esexitus->renderViewHelper() ?></td>

Desde el javascript de la vista, se gestiona si el checkbox 'esexitus' está marcado o no:
function gestioExitus(){
exitus= document.getElementById('esexitus');
if(exitus.checked==true) { <-- ESTO EN IE8 NO ME FUNCIONA
document.getElementById('dataexitus').disabled=fal se;
}else document.getElementById('dataexitus').disabled=tru e;
}

El problema se soluciona si a la función javascript 'gestioExitus' se le pasa el propio checkbox (desde el form). Quedaria de la siguiete forma:

Creación del checkbox en el Form de Zend:

Código PHP:

  $this->addElement( 
        'checkbox', 
        'esexitus', 
        array('required' => false, 'checked'=>0, 'label' => 'Éxitus', 'onclick'=>'gestioExitus([COLOR="Red"]this[/COLOR])') 
        );

Se muestra el check box en la vista .html:

Código HTML:

<td> <?php echo $form->esexitus->renderLabel(). $form->esexitus->renderViewHelper() ?></td>

Desde el javascript de la vista, se gestiona si el checkbox 'esexitus' está marcado o no:
function gestioExitus(exitus){
// exitus= document.getElementById('esexitus'); <-- ESTO FUERA if(exitus.checked==true) {
document.getElementById('dataexitus').disabled=fal se;
}else document.getElementById('dataexitus').disabled=tru e;
}

De este modo funciona me funciona en IE8 i firefox, aunque sigo sin entender porque antes no funcionava...
Muchas gracias por los consejos y la paciencia!!
saludos