首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >禁用提交按钮,直到所有字段都有值为止

禁用提交按钮,直到所有字段都有值为止
EN

Stack Overflow用户
提问于 2011-04-11 04:13:29
回答 7查看 197.4K关注 0票数 73

我想禁用提交按钮,直到所有字段都有值为止。我该怎么做呢?

代码语言:javascript
复制
<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>
EN

回答 7

Stack Overflow用户

发布于 2011-04-11 04:28:14

代码语言:javascript
复制
$('#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 with your code,作品:)

票数 23
EN

Stack Overflow用户

发布于 2013-09-22 15:37:28

对于所有的解决方案,而不是".keyup“,应该使用".change”,否则当有人为任何文本字段选择存储在cookies中的数据时,提交按钮将不会被禁用。

票数 9
EN

Stack Overflow用户

发布于 2011-04-11 05:00:33

所有变量都被缓存,因此循环和键控事件不必在每次运行时都创建jQuery对象。

代码语言:javascript
复制
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');
});

http://jsfiddle.net/DKNhx/3/查看工作示例

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5614399

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档