1

複数の入力、選択ボックス、およびテキストエリアを含むフォームがあります。必須として指定したすべてのフィールドに値が入力されるまで、送信ボタンを無効にしたいと考えています。そして、それらがすべて入力された後、WAS フィールドがユーザーによって消去された場合、送信ボタンを再び無効に戻したいと思います。

jQueryでこれを達成するにはどうすればよいですか?

4

6 に答える 6

8

私の最初の本能は、ユーザーが入力の変更を開始するたびに関数を実行することだと思います。このようなもの：

$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
   inspectAllInputFields();
});

次に、すべての入力をチェックし、検証された場合は送信ボタンを有効にする関数を作成します...

function inspectAllInputFields(){
     var count = 0;
     $('.requiredInput').each(function(i){
       if( $(this).val() === '') {
           //show a warning?
           count++;
        }
        if(count == 0){
          $('#submitBtn').prop('disabled', false);
        }else {
          $('#submitBtn').prop('disabled', true);
        }

    });
}

入力値が保存されている場合、または他のコードがデータを入力している場合でも、正しく機能するように、ページの読み込み時に inspect 関数の呼び出しを追加することもできます。

 inspectAllInputFields();

これがお役に立てば幸いです、〜マット

于 2011-10-13T14:57:39.203 に答える
4

ここに包括的なものがあります。理由は次のとおりです。

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                disable = true; // disable submit if any of them are still blank
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/mblase75/xtPhk/1/

于 2011-10-13T14:59:27.617 に答える
0

送信ボタンに無効属性を設定します。お気に入り：

$('input:submit').attr('disabled', 'disabled');

フォーム フィールドで .change() イベントを使用します。

于 2011-10-13T14:52:37.517 に答える
0

私からのアイデア：

  • グローバル スコープで変数を定義し、値 true を追加します。値が true の場合、submit イベントのみを評価します。
  • 入力フィールドと選択フィールドからすべての値を確認する関数を作成します。値の長さをゼロにチェックしています。1 つのフィールドの値の長さがゼロの場合、グローバル変数の値を false に変更します。
  • その後、すべての入力フィールドにイベント「onKeydown」または「onKeyUp」を追加し、すべての選択ボックスにイベント「onChange」を追加します。
于 2011-10-13T14:57:51.547 に答える
0

少し異なるアプローチを取り、jquery の検証http://docs.jquery.com/Plugins/validationを使用することをお勧めします。あなたが提案している戦術は、セキュリティホールになりがちです。ユーザーは簡単に firebug を使用してそのボタンを有効にし、フォームを送信できます。

jquery 検証の使用はクリーンであり、送信時に必要に応じて必須フィールドの下にエラー メッセージを表示できます。

于 2011-10-13T15:01:14.647 に答える
0

ボタンを無効にして開始します（明らかに）。onkeyup必要な各テキスト入力、および選択ボックス (および任意のラジオ ボタン/チェックボックス) にイベントをonchangeバインドし、イベントがonclick発生したときに、必要なすべての入力が入力されているかどうかを確認します。その場合は、ボタンを有効にします。そうでない場合は、無効にします。

ただし、ここに 1 つの抜け穴があります。ユーザーはonkeyup、マウスを使用してテキストを「切り取る」か、削除する前に削除/バックスペース キーを押しながらボタンをクリックすることで、イベントをトリガーせずにテキスト フィールドの値を削除できます。

どちらかで秒を回避できます

  • でボタンを無効にし、onkeydown問題がないかどうかを確認しますonkeyup
  • ボタンがクリックされたときの有効性のチェック
于 2011-10-13T14:53:37.390 に答える