如何用jQuery实现输入框互斥只读并自动赋值0.00功能

针对你需要实现的「两个输入框互斥输入，一方有值时另一方置0并禁用，清空后恢复」功能，以下是修正后的实现代码，同时指出原代码存在的问题：

原代码的问题 #

• CSS设置语法错误：css()方法传入多个独立参数无效，需要传入包含样式键值对的对象。
• 缺少只读属性设置：仅靠pointer-events: none无法完全阻止输入（用户可通过键盘操作），需添加readonly属性。
• 未处理清空恢复逻辑：当有值的输入框被清空时，没有恢复另一个输入框的可编辑状态。
• 值判断不够严谨：输入框的值是字符串类型，直接用>0判断可能引发逻辑错误，需先转为数字。

修正后的代码 #

HTML #

<td class="td"><input type="number" class="form-control debtor" step="0.01"></td>
<td class="td"><input type="number" class="form-control creditor" step="0.01"></td>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

（注：给输入框添加step="0.01"更符合金额类输入场景）

JavaScript #

$(document).on('input change', '.debtor, .creditor', function() {
  const $row = $(this).closest('tr');
  const $debtor = $row.find('.debtor');
  const $creditor = $row.find('.creditor');
  const debtorVal = parseFloat($debtor.val()) || 0;
  const creditorVal = parseFloat($creditor.val()) || 0;

  // debtor有值时，禁用creditor
  if (debtorVal > 0) {
    $creditor.val('0.00').prop('readonly', true).css({
      'pointer-events': 'none',
      'cursor': 'not-allowed',
      'background-color': '#e9ecef'
    });
  } 
  // creditor有值时，禁用debtor
  else if (creditorVal > 0) {
    $debtor.val('0.00').prop('readonly', true).css({
      'pointer-events': 'none',
      'cursor': 'not-allowed',
      'background-color': '#e9ecef'
    });
  } 
  // 两者都为空/0时，恢复可编辑状态
  else {
    [$debtor, $creditor].forEach($input => {
      $input.prop('readonly', false).css({
        'pointer-events': 'auto',
        'cursor': 'text',
        'background-color': ''
      });
    });
  }
});

功能说明 #

• 当debtor输入大于0的值时，creditor自动设为0.00，变为只读状态并禁用光标。
• 当creditor输入大于0的值时，debtor自动设为0.00，变为只读状态并禁用光标。
• 清空任意一个有值的输入框后，两个输入框立即恢复可编辑状态，移除禁用样式。
• 用parseFloat统一处理值的类型转换，避免字符串判断错误；添加的背景色样式和Bootstrap只读控件视觉效果统一。

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