desactivar el botón de enviar si las entradas están vacías con jQuery

Question

Estoy intentando desactivar un botón de enviar hasta que el usuario haya completado los campos de entrada en el formulario.

Encontré THIS aquí que tenía una muy buena respuesta. Tengo un pequeño problema para que el botón de enviar se vuelva a habilitar cuando se completen los campos.

¿Puede alguien echar un vistazo a esta función y ayudarme a descubrir lo que me estoy perdiendo? Cualquier ayuda sería muy apreciada: D Gracias.

Heres a Fiddle también

$(document).ready(function() { 
var $submit = $("input[type=submit]"); 

if ($("input:empty").length > 0) { 
$submit.attr("disabled","disabled"); 
} else { 
$submit.removeAttr("disabled"); 
} 
}); 


<form method="POST" action="<%=request.ServerVariables("SCRIPT_NAME")%>"> 
User Name: <input name="Username" type="text" size="14" maxlength="14" /><br /> 
Password: <input name="last_name" type="password" size="14" maxlength="14"><br /> 
<input type="submit" value="Login" name="Submit" id="loggy"> 
</form> 

Answer 1

$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
     $inputs = $('input[type=text], input[type=password]'); 

    function checkEmpty() { 

     // filter over the empty inputs 

     return $inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    $inputs.on('blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).blur(); // trigger an initial blur 
}); 

Working sample

En lugar de la falta de definición también se puede utilizar como keyup:

$inputs.on('keyup', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).keyup(); // trigger an initial keyup 

También puede combinar varios eventos:

$inputs.on('keyup blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).keyup(); // trigger any one 

Answer 2

En su pregunta, no veo el código donde se comprueba constantemente el estado de las entradas, creo que el problema es ese.

Puede usar eventos en vivo para hacer eso. Usando su código como ejemplo:

$(document).ready(function() { 
     var $submit = $("input[type=submit]"); 

     function checkSubmitState() 
     { 
      if ($("input:empty").length > 0) { 
      $submit.attr("disabled","disabled"); 
      } else { 
      $submit.removeAttr("disabled"); 
      } 
     } 

     // check the submit state on every change or blur event. 
     $("input").live("change blur", checkSubmitState); 
}); 

Answer 3

utilizar el evento keyup para comprobar el valor antes de ejecutar la condición:

$(document).ready(function() { 
    $('input:text, input:password').keyup(function() { 
     if ($(this).val() !== "") { 
      $('input:submit').removeAttr('disabled'); 
     } else { 
      $('input:submit').attr('disabled', 'true'); 
     } 
    }); 
}); 

http://jsfiddle.net/tovic/He4Kv/23/

Answer 4

Algunas de estas respuestas aquí son un lil fuera de fecha porque estaba buscando un fragmento de jQuery. Los probé y parece que ya no funcionan correctamente debido a las objeciones, creo.

Así que hice la mía propia y aquí hay una forma de trabajo más nueva (jQuery> = 3.0) que escucha el evento de entrada, por ejemplo.

var inp = $('[type=text]'), 
 
    btn = $('[type=button]') 
 
btn.prop('disabled',true) 
 

 
inp.on('input',() => { 
 
    var empty 
 
    inp.map(v => 
 
    !inp.eq(v).val() ? 
 
     empty = true : false 
 
) 
 
    btn.prop('disabled',empty || false) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<form> 
 
\t <input type=text><br> 
 
\t <input type=text><br> 
 
\t <input type=text><br> 
 
\t <input type=button value=Send> 
 
</form>

Una llanura JavaScript ejemplo es here.