0

私は、すべてのフィールドが満たされるまで送信ボタンを無効にするいくつかのJavaScriptを実装しようとしています。私はここで素晴らしいものを見つけました：すべてのフィールドに値があるまで送信ボタンを無効にします。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

私は自分のシステムでこれをテストし、独自のバージョンの 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>
于 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(){ };

1 つは jQuery の慣用句であり、もう 1 つは $(window).load が後で起動するのに対し、$(document).ready() はすべての DOM 要素が利用可能になるとすぐに起動します。すべてのアセット (場合によっては大きい) がロードされた直後ではありません。

ソース: window.onload と $(document).ready()

于 2013-08-05T19:56:33.020 に答える