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:
algo.js<!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>
Código:
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
$(document).ready(function(){
$('#registrarse').attr('disabled','disabled');
$('#correo').keypress(function(){
if($('#correo').val() != ''){
$('#registrarse').removeAttr('disabled');
}
});
});
), 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. 
