在jQuery表格中实现两个输入框互斥禁用：一方有值则禁用另一方

嘿，这个需求挺实用的，我给你写个清晰的实现方案，保证能完美解决你的问题：

首先，咱们先给两个输入框加个共同的类，这样用jQuery选择起来更方便，不用单独写每个name的选择器：

<input type="text" name='name0' placeholder='0.00' class="form-control mutual-exclusive-input">
<input type="text" name='mail0' placeholder='0.00' class="form-control mutual-exclusive-input" >

接下来是核心的jQuery逻辑，咱们要监听输入框的input事件（这个事件能响应所有输入操作，包括打字、粘贴、删除内容），然后实时处理互斥禁用的逻辑：

$(document).ready(function() {
  // 初始化检查：如果页面加载时某个输入框已有值，自动禁用另一个
  checkAndToggleInputs();

  // 监听输入框的输入事件
  $('.mutual-exclusive-input').on('input', function() {
    checkAndToggleInputs();
  });

  // 封装成函数，方便复用
  function checkAndToggleInputs() {
    const $inputs = $('.mutual-exclusive-input');
    // 获取两个输入框的值，去除首尾空格
    const val1 = $inputs.eq(0).val().trim();
    const val2 = $inputs.eq(1).val().trim();

    // 如果第一个有值，禁用第二个；否则启用
    $inputs.eq(1).prop('disabled', val1 !== '');
    // 如果第二个有值，禁用第一个；否则启用
    $inputs.eq(0).prop('disabled', val2 !== '');
  }
});

逻辑解释： #

• 初始化检查：页面加载完成后先执行一次检查，避免出现输入框已有值但另一个还能编辑的情况
• 实时监听：用input事件代替keyup，能覆盖更多输入场景（比如右键粘贴、浏览器自动填充）
• 值判断：用trim()处理值，避免用户只输入空格就触发禁用的误判
• 复用函数：把核心逻辑封装成函数，不管是初始化还是输入变化都能调用，代码更简洁

如果你的输入框是动态生成的（比如表格里新增的行），可以把事件委托给父元素，比如：

// 假设表格的父容器是#table-container
$('#table-container').on('input', '.mutual-exclusive-input', function() {
  // 找到当前行的两个互斥输入框，而不是全局的
  const $rowInputs = $(this).closest('tr').find('.mutual-exclusive-input');
  const val1 = $rowInputs.eq(0).val().trim();
  const val2 = $rowInputs.eq(1).val().trim();

  $rowInputs.eq(1).prop('disabled', val1 !== '');
  $rowInputs.eq(0).prop('disabled', val2 !== '');
});

这样就算表格新增行，新的输入框也能正常触发互斥逻辑啦～

内容的提问来源于stack exchange，提问作者R.Rich