Question

我一直在尝试实现一些禁用提交按钮的JavaScript，直到所有字段都填满为止。我发现这里很棒：Disabling submit button until all fields have values。 Hristo提供的链接完全符合我的要求：http://jsfiddle.net/qKG5F/641/。

我的问题是，当我试图整理一个完整的“最低工作范例”时，我完全被难过了。我确信我有一些不足之处，但是我已经想到了这一点：

<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">
    (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 https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
        });
    })()
    </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" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

我只是复制/粘贴并添加了我认为有必要使页面正常工作但我的提交按钮仍然永久禁用。我错过了什么简单的部分才能使这个工作？

谢谢！

Answer 1

你必须用onload函数包围它：

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

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

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
});

如果你看一下jsFiddle的来源，你会看到它包裹了same way.

Answer 2

我在我的系统上测试了这个，使用你自己的jquery版本，以及在document.ready()中稍加改动和包装javascript的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
       $(document).ready(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
        }
        });
    });
    </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" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

</html>

Answer 3

您的原始js是一个立即调用的函数表达式。这是一个解释该模式的链接： http://benalman.com/news/2010/11/immediately-invoked-function-expression/

您定义了一个匿名函数，然后立即调用它。当你的html页面加载时，脚本已经运行了。正如其他人正确回答的那样，您需要等待所有DOM元素在执行脚本之前加载。

虽然

$(window).load(function(){};

有效，你应该使用这个的jQuery版本：

$(document).ready(function(){ };

首先，它是jQuery惯用语，而另一个，$（window）.load会在以后触发，而$（document）.ready（）会在所有DOM元素可用时立即触发;不是所有资产（可能很大）都被加载。

来源：window.onload vs $(document).ready()

Answer 4

如果您将JavaScript（整个script元素）放在页面末尾，就在结束body标记之前，它应该可以正常工作。这是因为JavaScript需要在构建DOM之后运行。通过在加载页面之后放置脚本（然后立即调用它），文档将准备好并且应该可以正常工作。

工作示例：http://jsfiddle.net/NgEHg/

实现jQuery函数

4 个答案: