0

我一直在尝试实现一些 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>

我只是复制/粘贴并添加了我认为使页面正常工作所必需的内容，但我的提交按钮仍然永久禁用。我缺少什么简单的部分来完成这项工作？

谢谢！

4

4 回答 4

0

你必须用一个 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 的源代码，您会发现它是以相同的方式包装的。

于 2013-08-05T18:11:42.123 回答
0

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

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

于 2013-08-05T20:39:22.337 回答
0

我在我的系统上对此进行了测试，可以使用您自己的 jquery 版本，以及稍加改动的代码并将 javascript 包装在document.ready()中。

<!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>
于 2013-08-05T18:16:01.497 回答
0

你原来的 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 与 $(document).ready()

于 2013-08-05T19:56:33.020 回答