表格所有记录实现空文本框禁用按钮：jQuery仅首行生效的解决求助

嘿，这个问题我太熟了！大概率是你用了ID选择器导致的——因为HTML里ID是唯一的，jQuery只会匹配到第一个带这个ID的元素，所以只有第一行生效。别慌，咱们改改代码就能搞定所有行啦！

第一步：调整HTML结构（用类代替ID） #

先把你的表格元素换成类选择器，避免ID重复的问题：

<table>
  <tr>
    <td><input type="text" class="row-input"></td>
    <td><input type="text" class="row-input"></td>
    <td><button class="submit-btn">提交</button></td>
  </tr>
  <tr>
    <td><input type="text" class="row-input"></td>
    <td><input type="text" class="row-input"></td>
    <td><button class="submit-btn">提交</button></td>
  </tr>
  <!-- 更多行... -->
</table>

第二步：编写jQuery逻辑（限定当前行操作） #

核心思路是只操作当前输入框所在的行，而不是全局匹配元素：

$(document).ready(function() {
  // 初始化：页面加载时先检查所有行的状态
  checkAllRows();

  // 监听所有输入框的输入/变化事件
  $('.row-input').on('input change', function() {
    // 精准定位当前输入框所在的行
    const $currentRow = $(this).closest('tr');
    // 检查该行的所有输入框是否都不为空（过滤出空值的输入框，长度为0则全填了）
    const allFilled = $currentRow.find('.row-input').filter(function() {
      return $(this).val().trim() === '';
    }).length === 0;

    // 根据检查结果启用/禁用该行的按钮
    $currentRow.find('.submit-btn').prop('disabled', !allFilled);
  });

  // 初始化检查所有行的函数
  function checkAllRows() {
    $('tr').each(function() {
      const $row = $(this);
      const allFilled = $row.find('.row-input').filter(function() {
        return $(this).val().trim() === '';
      }).length === 0;
      $row.find('.submit-btn').prop('disabled', !allFilled);
    });
  }
});

额外优化：适配动态生成的行 #

如果你的表格是通过AJAX或JS动态添加行的，把事件绑定改成事件委托，确保新增的行也能生效：

// 事件委托：绑定到表格父元素，即使后续新增行也能触发
$('table').on('input change', '.row-input', function() {
  const $currentRow = $(this).closest('tr');
  const allFilled = $currentRow.find('.row-input').filter(function() {
    return $(this).val().trim() === '';
  }).length === 0;
  $currentRow.find('.submit-btn').prop('disabled', !allFilled);
});

这样不管是静态还是动态生成的表格行，功能都能正常工作啦！

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