78 votes

Désactiver le bouton d'envoi jusqu'à ce que tous les champs aient des valeurs

Je veux désactiver mon bouton d'envoi jusqu'à ce que tous les champs aient des valeurs. Comment puis-je le faire?

 <html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#register').attr("disabled", true);
        });
        </script>
    </head>
    <body>
        <form>
        Username<br />
        <input type="text" id="user_input" name="username" /><br />
        Password<br />
        <input type="text" id="pass_input" name="password" /><br />
        Confirm Password<br />
        <input type="text" id="v_pass_input" name="v_password" /><br />
        Email<br />
        <input type="text" id="email" name="email" /><br />     
        <input type="submit" id="register" value="Register" />
        </form>
        <div id="test">
        </div>
    </body>
</html>
 

106voto

Hristo Points 12268

Découvrez ce violon... http://jsfiddle.net/qKG5F/641/

HTML

// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />

JavaScript

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

La bonne chose à propos de ceci est qu'il n'a pas d'importance combien de champs de saisie, vous avez dans votre formulaire, il sera toujours garder le bouton désactivé si il y a au moins 1 qui est vide. Il vérifie également le vide sur l' .keyup() ce qui, je pense, il est plus pratique d'utilisation.

J'espère que cette aide.
Hristo

26voto

rsplak Points 6238
 $('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
    if(allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
    var filled = true;
    $('body input').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}
 

JSFiddle avec votre code , fonctionne :)

9voto

user2008800 Points 21

Pour toutes les solutions au lieu de ".keyup" ".change" doit être utilisé, sinon le bouton d'envoi ne sera pas désactivé si quelqu'un sélectionne simplement les données stockées dans les cookies pour les champs de texte.

8voto

Hussein Points 23042

Toutes les variables sont mises en cache afin que l'événement loopup et keyup ne doive pas créer d'objet jQuery à chaque exécution.

 var $input = $('input:text'),
    $register = $('#register');    
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
 

Consultez l'exemple de travail sur http://jsfiddle.net/DKNhx/3/

5voto

fl00r Points 41855

DEMO: http://jsfiddle.net/kF2uK/2/

 function buttonState(){
    $("input").each(function(){
        $('#register').attr('disabled', 'disabled');
        if($(this).val() == "" ) return false;
        $('#register').attr('disabled', '');
    })
}

$(function(){
    $('#register').attr('disabled', 'disabled');
    $('input').change(buttonState);
})
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X