jquery - 根据搜索条件启用/禁用清除按钮

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

如果您愿意接受建议，那么这是实现您想要做的事情的简单方法

小提琴

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