技术咨询：禁用输入框取值、差值计算及onkeyup/onchange替代事件

数据老陈

2026-8-18

问题描述

如何从禁用的文本输入框中获取值，计算sub_total（借方金额）与credit_total（贷方金额）的差值，并将结果显示在指定文本输入框中；
除onkeyup、onchange事件外，可用于获取禁用文本输入框值的其他事件；
在Services和Tax输入框完成输入后，自动计算上述差值并展示在“service with no bir”的贷方金额框中。

JavaScript 代码

jQuery($ => {
  init_input();
});
jQuery($ => {
  init_input2();
});

//Expenses Debit Total
function init_input() {
  const $expenses_debit = $(".expenses_debit");
  const $res_debit = $("#sub_debit");
  $expenses_debit.on("input", () => {
    const total = $expenses_debit.get().reduce((acc, el) => (acc += parseFloat(el.value, 10) || 0), 0).toFixed(2);
    $res_debit.val(total);
  });
};

//Credit Total
function init_input2() {
  const $expenses_credit = $(".expenses_credit");
  const $res_credit = $("#sub_credit");
  $expenses_credit.on("input", () => {
    const total0 = $expenses_credit.get().reduce((acc, el) => (acc += parseFloat(el.value, 10) || 0), 0).toFixed(2);
    $res_credit.val(total0);
  });
}

//expendable furniture
$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap27"); //Fields wrapper
  var add_button = $(".add_field_button27"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<tr style="background:silver"><td><div class="row"><div class="col-lg-3"><a href="#" class="remove_field27"><button class="btn btn-sm btn-light">del</button></a></div></div></div></td><td>Servive</td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm expenses_debit operating_debit total1" placeholder="0.00" id="expendable_furniture_debit[]"></div></td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm " placeholder="0.00" disabled></div></td></tr>'); //add input box
    }
    init_input();
  });

  $(wrapper).on("click", ".remove_field27", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest("tr").remove();
    x--;
  })
});

//bir
$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap28"); //Fields wrapper
  var add_button = $(".add_field_button28"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<tr style="background:silver"><td><div class="row"><div class="col-lg-3"><a href="#" class="remove_field28"><button class="btn btn-sm btn-light">del</button></a></div></div></div></td><td>Tax</td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm" placeholder="0.00" disabled></div></td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm expenses_credit" placeholder="0.00" id="bir_credit[]"></div></td><td></td></tr>');
    }
    init_input2();
  });

  $(wrapper).on("click", ".remove_field28", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest("tr").remove();
    x--;
  })
});

//code that will get the sub_total and credit_total
const $res_credit = $("#new_operating_credit");
//const $res_credit2 = $("#sub_credit"); 
$('#sub_credit, #sub_debit').keyup(function() {
  var a = $('#sub_credit').val();
  var b = $('#sub_debit').val();
  const tot = parseFloat(b - a).toFixed(2);
  const tot2 = parseFloat(tot) + parseFloat(a);
  const tots = tot2.toFixed(2)
  $res_credit.val(tot);
  //$res_credit2.val(tots);
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <table class="table table-sm table-hover table-fixed" align="center" style="font-size: 9pt">
    <thead style="font-size: 11pt">
      <tr align="center">
        <th width="15%">Check Series</th>
        <th>UACS Object Code</th>
        <th width="20%">Debit Amount</th>
        <th width="20%">Credit Amount</th>
      </tr>
    </thead>
    <tbody class="input_fields_wrap27">
      <tr>
        <td>
          <div class="row">
            <div class="col-lg-3">
              <button class="btn btn-sm btn-light add_field_button27">add</button>
            </div>
          </div>
        </td>
        <td>Service</td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm expenses_debit operating_debit total1" placeholder="0.00" id="expendable_furniture_debit[]">
          </div>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm " placeholder="0.00" disabled>
          </div>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tbody class="input_fields_wrap28">
        <tr>
          <td>
            <div class="row">
              <div class="col-lg-3">
                <button class="btn btn-sm btn-light add_field_button28">add</button>
              </div>
            </div>
          </td>
          <td>Tax</td>
          <td>
            <div class="input-group input-group-lg">
              <span class="input-group-text" style="font-size: 9pt">P</span>
              <input type="text" style="font-size:12px" autocomplete="off" name="bir_debit" class="form-control form-control-sm" placeholder="0.00" disabled>
            </div>
          </td>
          <td>
            <div class="input-group input-group-lg">
              <span class="input-group-text" style="font-size: 9pt">P</span>
              <input type="text" style="font-size:12px" autocomplete="off" name="new_bir_credit" class="form-control form-control-sm expenses_credit" placeholder="0.00" id="bir_credit" required="">
            </div>
          </td>
          <td></td>

        </tr>
      </tbody>
      <tr>
        <td></td>
        <td>service with no bir</td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm" placeholder="0.00" id="new_operating_debit total1" disabled>
          </div>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm expenses_credit" placeholder="0.00" disabled id="new_operating_credit">
          </div>
        </td>
        <td></td>
      </tr>
      <tr>
        <td colspan="2">
          <h5 align="right"><b>SUB TOTAL</b></h5>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm" style="font-size: 16pt; font-weight: bold;" placeholder="0.00" disabled="" id="sub_debit">
          </div>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm" style="font-size: 16pt; font-weight: bold;" placeholder="0.00" disabled="" id="sub_credit">
          </div>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

内容的提问来源于stack exchange，提问作者Mike Ahren Rances

技术咨询：禁用输入框取值、差值计算及onkeyup/onchange替代事件

JavaScript 代码 #

HTML 代码 #

JavaScript 代码

HTML 代码