5

ユーザーがフォームの入力フィールドに入力するまで、送信ボタンを無効にしようとしています。

私は本当に良い答えを持っていたこのスレッドを見つけました。フィールドが入力されたときに送信ボタンを再度有効にするのに少し問題があります。

誰かがこの関数を見て、私が欠けているものを理解するのを手伝ってもらえますか? どんな助けでも大歓迎です：Dありがとう。

こちらもフィドル

$(document).ready(function() {
var $submit = $("input[type=submit]");

if ( $("input:empty").length > 0 ) {
$submit.attr("disabled","disabled");
} else {
$submit.removeAttr("disabled");
}
});


<form method="POST" action="<%=request.ServerVariables("SCRIPT_NAME")%>">
User Name: <input name="Username" type="text" size="14" maxlength="14" /><br />
Password: <input name="last_name" type="password" size="14" maxlength="14"><br />
<input type="submit" value="Login" name="Submit" id="loggy">
</form>
4

4 に答える 4

13 
$(document).ready(function() {
    var $submit = $("input[type=submit]"),
        $inputs = $('input[type=text], input[type=password]');

    function checkEmpty() {

        // filter over the empty inputs

        return $inputs.filter(function() {
            return !$.trim(this.value);
        }).length === 0;
    }

    $inputs.on('blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).blur(); // trigger an initial blur
});

作業サンプル

ぼかしの代わりに、次のような keyup を使用することもできます。

    $inputs.on('keyup', function() {
        $submit.prop("disabled", !checkEmpty());
    }).keyup();  // trigger an initial keyup

また、複数のイベントを組み合わせることができます:

    $inputs.on('keyup blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).keyup();  // trigger any one
于 2012-07-14T09:54:50.747 に答える
1

あなたの質問では、入力の状態を常にチェックするコードが表示されません。問題はそれだと思います。

これを行うには、ライブ イベントを使用できます。コードを例として使用します。

$(document).ready(function() {
      var $submit = $("input[type=submit]");

      function checkSubmitState()
      {
          if ( $("input:empty").length > 0 ) {
             $submit.attr("disabled","disabled");
          } else {
             $submit.removeAttr("disabled");
          }
      }

      // check the submit state on every change or blur event.
      $("input").live("change blur", checkSubmitState);
});
于 2012-07-14T09:57:26.420 に答える
1

条件を実行する前に、keyup イベントを使用して値を確認します。

$(document).ready(function() {
    $('input:text, input:password').keyup(function() {
        if ($(this).val() !== "") {
            $('input:submit').removeAttr('disabled');
        } else {
            $('input:submit').attr('disabled', 'true');
        }
    });
});

http://jsfiddle.net/tovic/He4Kv/23/

于 2012-07-14T18:42:03.187 に答える