如何无需点击操作，自动根据找零金额正负启用/禁用Redeem按钮

需求：无需手动点击，当页面显示的找零金额为正数时自动启用Redeem按钮，负数时自动禁用。当前问题：输入金额计算出找零后，必须点击其他区域，按钮才会切换启用/禁用状态。

提供的代码 #

HTML代码

<div class="form-group col-lg-12">
        <label class="text-capitalize text-danger">Change</label>
        <div class="input-group">
            <span class="input-group-addon">RM</span>
            <div class="form-control input-mimic" id="change_amount"></div>
        </div>
    </div>

JS代码

$("body").on("keyup", "#modal-redeem #redeem_tendered_amount", function(e) {
  var tendered_amt = this;
  var tendered_amt_bank = $('#redeem_tendered_amount_bank');
  calculateChange(tendered_amt, tendered_amt_bank, "#modal-redeem #redeem_payable", "#modal-redeem #redeem_change_amount");
});

$("body").on("keyup", "#modal-redeem #redeem_tendered_amount_bank", function(e) {
  var tendered_amt_bank = this;
  var tendered_amt = $('#redeem_tendered_amount');
  calculateChange(tendered_amt, tendered_amt_bank, "#modal-redeem #redeem_payable", "#modal-redeem #redeem_change_amount");
});

$("#redeem_tendered_amount").on("change", function() {
  showHideRedeemButton();
});

$("#redeem_tendered_amount_bank").on("change", function() {
  showHideRedeemButton();
});

function showHideRedeemButton() {
  var change_amt = $('#redeem_change_amount').text();
  if (change_amt < 0) {
    document.getElementById("confirm_redeem").disabled = true;
  } else {
    document.getElementById("confirm_redeem").disabled = false;
  }
}

问题原因 #

目前showHideRedeemButton()仅在输入框的change事件触发时执行，而change事件只有输入框失去焦点（点击其他区域）时才会触发。虽然keyup事件会实时计算找零，但没有同步调用按钮状态更新函数，导致找零更新后按钮状态未及时切换。

另外，showHideRedeemButton中直接用文本字符串和数字比较，可能因格式问题（比如包含"RM"前缀）导致判断错误。

解决方案 #

1. 在两个keyup事件处理函数中，调用calculateChange后立即执行showHideRedeemButton()，实现实时更新按钮状态。
2. 优化showHideRedeemButton中的数值提取逻辑，确保正确获取找零的数字值。

修改后的JS代码 #

$("body").on("keyup", "#modal-redeem #redeem_tendered_amount", function(e) {
  var tendered_amt = this;
  var tendered_amt_bank = $('#redeem_tendered_amount_bank');
  calculateChange(tendered_amt, tendered_amt_bank, "#modal-redeem #redeem_payable", "#modal-redeem #redeem_change_amount");
  // 实时更新按钮状态
  showHideRedeemButton();
});

$("body").on("keyup", "#modal-redeem #redeem_tendered_amount_bank", function(e) {
  var tendered_amt_bank = this;
  var tendered_amt = $('#redeem_tendered_amount');
  calculateChange(tendered_amt, tendered_amt_bank, "#modal-redeem #redeem_payable", "#modal-redeem #redeem_change_amount");
  // 实时更新按钮状态
  showHideRedeemButton();
});

$("#redeem_tendered_amount").on("change", function() {
  showHideRedeemButton();
});

$("#redeem_tendered_amount_bank").on("change", function() {
  showHideRedeemButton();
});

function showHideRedeemButton() {
  // 提取数字部分，处理带RM前缀的情况
  var change_text = $('#redeem_change_amount').text().trim();
  var change_amt = parseFloat(change_text.replace(/[^0-9.-]/g, ''));
  
  // 处理NaN情况（比如找零未计算时）
  if (isNaN(change_amt) || change_amt < 0) {
    document.getElementById("confirm_redeem").disabled = true;
  } else {
    document.getElementById("confirm_redeem").disabled = false;
  }
}

内容的提问来源于stack exchange，提问作者bebbot_