javascript - jQuery 动态设置按钮元素事件和禁用

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

我会这样做。在启用/禁用按钮之前，我们必须检查两个文本框的值。这是一个工作 fiddle 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;
 }