Question

我目前正在使用jQuery处理客户端脚本。

当我在1个输入字段中输入或删除文本时，我实现了设置按钮元素的禁用或启用。

但是，我需要检查2个输入字段是否有值，否则应禁用按钮。但是，如果我将文本放在1个输入字段中，按钮总是会启用...

HTML

<button type="button" id="btnSave">Save</button>
<button type="button" id="btnSubmit">Save</button>

<input type="text" id="BusinessLineIdList" />
<input type="text" id="Label" />

JS

$("#BusinessLineIdList").on("keyup", function () {
     checkBusinessLine();
     checkLabel();
});

$("#Label").on("keyup", function () {
     checkLabel();
     checkBusinessLine();
});

function checkLabel() {
    if ($("#Label").val()) {
        setBtnActive();
    } else {
        setBtnDisabled()
    };
}

function checkBusinessLine() {
    if ($("#BusinessLineId").val()) {
        setBtnActive();
    }
    else {
        setBtnDisabled();
    }
}

function setBtnActive() {
    $("#btnSave").removeAttr("disabled");
    $("#btnSubmit").removeAttr("disabled");
};

function setBtnDisabled() {
    $("#btnSave").attr('disabled', true);
    $("#btnSubmit").attr('disabled', true);
};

您是否知道如何解决此问题？感谢

Answer 1

我会这样做。在启用/禁用按钮之前，我们必须检查两个文本框值。这是一个工作小提琴https://jsfiddle.net/71up0zfm/

我更改的jquery代码：

$("#BusinessLineIdList").on("keyup", function () {
 var x=checkBusinessLine();
 var y=checkLabel();
 if(x&&y)
 setBtnActive();
 else
 setBtnDisabled();
 });

 $("#Label").on("keyup", function () {
 var x=checkLabel();
 var y=checkBusinessLine();
 if(x&&y)
 setBtnActive();
 else
 setBtnDisabled();

 });

 function checkLabel() {
 var state=false;
 if ($("#Label").val()) {
    state=true;
 } 
 return state;
 }

 function checkBusinessLine() {
 var state=false;
 if ($("#BusinessLineIdList").val()) {
    state=true;
 }
 return state;
 }

Answer 2

每次更改时，请检查它们并根据结果执行操作：

$("#BusinessLineIdList").on("keyup", callback);
$("#Label").on("keyup", callback);

function callback() {
     if (isLabelHasValue() && isBusinessLineHasValue()) {
        setBtnActive();
     } else {
        setBtnDisabled();
     }
}

function isLabelHasValue() {
    return $("#Label").val() && $("#Label").val().length > 0;
}

function isBusinessLineHasValue() {
    return $("#BusinessLineId").val() && $("#BusinessLineId").val().length > 0;
}

function setBtnActive() {
    $("#btnSave").removeAttr("disabled");
    $("#btnSubmit").removeAttr("disabled");
};

function setBtnDisabled() {
    $("#btnSave").attr('disabled', true);
    $("#btnSubmit").attr('disabled', true);
};

jQuery设置按钮元素动态激活和禁用

2 个答案: