表格中基于另一输入框值禁用指定input的jQuery实现问题

原代码问题分析 #

你的代码失效主要有这几个原因：

• 触发时机滞后：用focusout只有输入框失去焦点才会触发，没法实时响应输入操作；
• 逻辑冲突：两个if语句会互相覆盖结果，比如Debit有值时先禁用Credit，但紧接着因为Credit没值又会禁用Debit，导致两个输入框都被锁死；
• 属性操作不当：用attr设置disabled不如prop可靠，disabled是布尔属性，prop能直接处理布尔值，更符合jQuery的最佳实践。

修正后的完整代码 #

HTML（无需修改，保持你的结构即可）

<table id="table">
<thead>
    <tr>
        <th>Accounts Ledger</th>
        <th>Debit</th>
        <th>Credit</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select></select>
        </td>
        <td><input type="number" class="input-value dr"></td>
        <td><input type="number" class="input-value cr"></td>
    </tr>
    <!-- 可添加更多行测试 -->
    <tr>
        <td>
            <select></select>
        </td>
        <td><input type="number" class="input-value dr"></td>
        <td><input type="number" class="input-value cr"></td>
    </tr>
</tbody>
</table>

jQuery代码

// 给所有Debit和Credit输入框绑定实时输入事件
$('input.input-value').on('input propertychange', function() {
    // 获取当前输入框所在的行
    const $row = $(this).closest('tr');
    // 拿到当前行的Debit和Credit输入框
    const $debit = $row.find('input.dr');
    const $credit = $row.find('input.cr');

    // 判断当前是Debit还是Credit输入框
    if ($(this).hasClass('dr')) {
        // Debit有值则禁用Credit，否则启用
        $credit.prop('disabled', $debit.val().trim() !== '');
    } else {
        // Credit有值则禁用Debit，否则启用
        $debit.prop('disabled', $credit.val().trim() !== '');
    }
});

代码逻辑说明 #

1. 实时响应：用input propertychange事件，用户输入过程中立刻触发，不用等失去焦点；
2. 行级隔离：通过closest('tr')锁定当前输入框所在的行，确保操作只影响本行的另一个输入框，不干扰其他行；
3. 精准判断：通过hasClass区分当前操作的输入框类型，根据输入值是否为空切换对方的禁用状态；
4. 可靠属性操作：用prop('disabled', 布尔值)设置禁用状态，比attr更稳定。

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