0

検索フォームには 3 つのテキスト フィールドがあり、その中にクリア ボタンがあります。

これが私がやりたいことです-

1 - 最初にクリアボタンが無効になります

2 - テキスト ボックスのいずれかにテキストが入力されると、[クリア] ボタンが有効になります。

3 - いずれかのテキスト ボックスにテキストがない場合にのみ、[クリア] ボタンが無効になります。

4 - 検索条件をさらに追加することもできます。つまり、テキスト ボックスはいくつでも作成できます。

これが私のコードです：

var toValidate = $("#basicSearchFields input"),
clearBtn = $("#clearBasicSearch");

toValidate.keyup(function () {
toValidate.each(function () {
    if ($(this).val().length > 0) {
        valid = true;
    } else {
        valid = false;
    }
    (valid === true) ? clearBtn.removeClass('disabled') : clearBtn.addClass('disabled');
});
});

テキストがテキストボックスのいずれかに入力されたときに実際にこのコードが行っていることは、ボタンが有効になっていますが、テキストボックスからテキストをクリアしてもボタンは再び無効になりません。私を助けてください！！

4

3 に答える 3

1

あなたが提案を受け入れるなら、あなたがやろうとしていることを達成するための簡単な方法がここにあります

フィドル

サンプル HTML

<div>
    <input type="text" class="search" />
    <input type="text" class="search" />
    <input type="text" class="search" />

    <button id="clearFields" disabled="disabled">Clear</button>
</div>

jQuery

$(".search").keyup(function(){
    $("#clearFields").prop("disabled", true);
    $(".search").each(function(){
        if(this.value.length > 0){
            $("#clearFields").prop("disabled", false);
        }
    });
});

クリアボタンを機能させるコード

$("#clearFields").click(function(){
  $(".search").each(function(){
        this.value = "";
  });
});
于 2013-08-23T11:26:06.497 に答える
0

反復する必要はありません。セレクターは、「toValidate」変数で選択されたすべての要素に対して同じ機能を実行します。

//Encapsulate the logic in a function that receives the context 
//and also the jQuery reference to the clear button
function ValidateContext(sToValidateSelector, jqClearButton) {
    var jqValidate = $(sToValidateSelector);

    //Bind/Re-bind the event (off/on) to prevent multi call to the same context.
    jqValidate
        .off('keyup')
        .on('keyup',function () {
            jqElement = $(this);
            jqClearButton.prop('disabled', jqElement.val().length == 0);
        });
}

1 つ以上のコンテキストに対して関数を呼び出します。

ValidateContext('#form1 input', $('#clearButton1'));
ValidateContext('#form2 input', $('#clearButton2'));
ValidateContext('#searchform input', $('#clearButtonSearch'));
//...
于 2013-08-23T11:20:24.813 に答える
0 
var toValidate = $("#basicSearchFields input:not(#clearBasicSearch)");
toValidate.keyup(function () {
    var valid = false; //default is false
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });

    $("#clearBasicSearch").toggleClass('disabled', !valid); //add if valid, remove if not
});
于 2013-08-23T11:24:22.597 に答える