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

根据搜索条件启用/禁用“清除”按钮

3 个答案: