Problemas al Activar/Desactivar botón usando JQueryMobile

anjudark89 · #1 (**permalink**) 05/03/2012, 02:50

Un saludo,

Estoy haciendo un formulario con HTML5 y JQueryMobile. En el formulario, tengo 3 campos: correo, contraseña y confirma contraseña. Me gustaría que el botón "enviar" se activara cuando el campo de correo se introduzca algo (y se desactivara si se llegara a borrar el dato introducido). Tengo el siguiente código:

Código:

Código:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Crear Cuenta</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <!--Jquery mobile-->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
		<script type="text/javascript" src="algo.js"></script>

		<script type="text/javascript" src="jquery.validate.js" ></script> <!--Validación de contraseñas-->
		<script type="text/javascript" src="valida_contraseña.js"></script> 
		<link rel="stylesheet" href="estilos.css" />
	</head>
	
	<body>
		<div data-role="page" id="crea_cuenta"> 
			
			<div data-role="header">
				<a href="#" data-icon="delete" class="ui-btn-right" rel="external">Cancelar</a> <!--Falta referencia-->
				<h3> Crear Cuenta</h3>
			</div> <!--header-->
			 
			<div data-role="content" id="contenido">
				<p>Si quieres proponer campañas o recibir noticias de oiga.me, crea una cuenta de usuario.</p>
				<form id="Formulario" method="post" action="#" > <!--Formulario-->
					<p>
						<label for="correo">E-mail</label>
						<input type="text" id="correo" name="correo" class="required email"/> 
					</p>
					<p>
						<label for="pass1">Contraseña</label>
						<input type="password"  id="pass1" name="pass1"/>
					</p>
					<p>
						<label for="pass2">Confirma Contraseña</label>
						<input type="password"  id="pass2" name="pass2"/>
					</p>
					<p>
						<label for="check"  data-inline="true">Deseo recibir noticias de oiga.me</label>
						<input type="checkbox" name="check" id="check" class="custom"  data-mini="true"/>
					</p>
							
						<input type="submit" name="registrarse" id="registrarse" data-inline="true" data-role="button" data-icon="check" value="Registrarse">
						<a href="recupera_contraseña.html" data-transition='flip' rel="external" data-role="button" data-inline="true">Recuperar Contraseña</a>
						<a href="instrucciones.html" rel="external" data-role="button" data-inline="true">Instrucciones</a>
				</form><!--Formulario-->
			</div> <!--content-->
			
			<div data-role="footer" data-position="fixed">
				<h3>Pie de Página<h3>
			</div> <!--footer-->
		</div> <!--page-->
	</body>
</html>

algo.js

Código:

Código:

$(document).ready(function(){
     $('#registrarse').attr('disabled','disabled');
     
     $('#correo').keypress(function(){
            if($('#correo').val() != ''){
               $('#registrarse').removeAttr('disabled');
            }
     });

 });

El botón se desactiva correctamente si ingreso un dato en el campo de E-mail, pero no se muestra como botón activado (osea, no cambia su apariencia opaca, aunque sí realiza el submit ), además de que, si borro la información del campo, el botón sigue activado, cuando me gustaría que se desactivara nuevamente. ¿Alguien podría ayudarme o indicarme cuál es mi error? De ante mano, muchas gracias.