表格输入数组值求和校验与提交按钮启用问题排查

核心问题分析 #

你的代码存在两处关键错误：

1. DOM更新目标错误：你把计算出的总和写到了No Good列的单元格中（$('td:last', $tr).prev()），而不是Check列的.check-qty span里，导致后续无法通过正确的元素判断校验状态；
2. 按钮状态判断逻辑错误：enableDIsableSubmit函数里用td:last:contains(2)来统计校验通过的行数，这完全和业务逻辑无关，自然无法正确判断所有行是否校验通过。

修正后的代码 #

JavaScript 代码

$('.calculation-table tbody tr td input').on('input', function() {
    const $tr = $(this).closest('tr');
    // 获取当前行的Total值
    const total = parseInt($tr.find('td:eq(0)').text().trim(), 10);
    // 计算Good和No Good输入框的总和
    let sum = 0;
    $tr.find('input').each(function() {
        sum += parseInt($(this).val().trim(), 10) || 0;
    });
    // 更新Check列的显示内容和样式
    const $checkSpan = $tr.find('.check-qty');
    $checkSpan.text(sum);
    if (sum === total) {
        $checkSpan.css('color', 'green');
        $tr.data('valid', true); // 标记当前行为有效
    } else {
        $checkSpan.css('color', 'red');
        $tr.data('valid', false); // 标记当前行为无效
    }
    // 更新按钮状态
    enableDisableSubmit();
}).trigger('input');

function enableDisableSubmit() {
    const totalRows = $('.calculation-table tbody tr').length;
    // 统计所有校验通过的行数
    const validRows = $('.calculation-table tbody tr').filter(function() {
        return $(this).data('valid') === true;
    }).length;
    // 当所有行都有效时启用按钮，否则禁用
    $('#submitBtn').prop('disabled', validRows !== totalRows || totalRows === 0);
}

HTML 代码（无需修改，保持原结构即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
  <table class="calculation-table">
    <thead>
      <tr class="paysilp-table-border">
        <th rowspan="2" style="width:15%;">Total</th>
        <th rowspan="2" style="width:15%;" class="text-center">Good</th>
        <th rowspan="2" style="width:15%;" class="text-center">No Good</th>
        <th rowspan="2" style="width:15%;" class="text-center">Check</th>
      </tr>
    </thead>
    <tbody class="paysilp-table-borders">
      <tr>
        <td>45</td>
        <td><input type="text" name="quality1[]" value="20"></td>
        <td><input type="text" name="quality2[]" value="25"></td>
        <td class="text-center"><span class="check-qty"></span></td>
      </tr>
      <tr>
        <td>30</td>
        <td><input type="text" name="quality1[]" value="20"></td>
        <td><input type="text" name="quality2[]" value="10"></td>
        <td class="text-center"><span class="check-qty"></span></td>
      </tr>
      <tr>
        <td>15</td>
        <td><input type="text" name="quality1[]" value="15"></td>
        <td><input type="text" name="quality2[]" value="0"></td>
        <td class="text-center"><span class="check-qty"></span></td>
      </tr>
    </tbody>
  </table>
  <button type="submit" id="submitBtn">Submit</button>
</form>

关键修改说明 #

• 修正DOM更新：将计算总和的目标改为Check列的.check-qty span，确保校验结果显示在正确位置；
• 添加行有效性标记：用$tr.data('valid', true/false)给每行标记校验状态，方便后续统计；
• 重写按钮状态判断逻辑：通过过滤所有标记为有效的行，对比总行数来决定是否启用按钮，逻辑清晰且符合业务需求。

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