根據搜索標準啓用/禁用清除按鈕

Question

搜索表單中有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'); 
}); 
}); 

其實什麼時，文本輸入到任何的文本框按鈕，得到啓用，但清除這段代碼是幹什麼文本框中的文本不會再次禁用該按鈕。請幫助我！

Answer 1

如果你是開放的建議，那麼這裏是一個簡單的方法來達到你正在嘗試做

FIDDLE

樣品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 = ""; 
    }); 
}); 

Answer 2

您不需要迭代，選擇器將爲「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); 
     }); 
} 

徵集一個或多個上下文的功能：

ValidateContext('#form1 input', $('#clearButton1')); 
ValidateContext('#form2 input', $('#clearButton2')); 
ValidateContext('#searchform input', $('#clearButtonSearch')); 
//... 

Answer 3

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 
});