如何通过jQuery仅修改同一div行内同级禁用输入框的内容？

我明白你要实现的效果：在每一行（.grpit）里，当启用状态的输入框输入内容时，实时把值同步到同一行里的禁用输入框，而且只修改当前这一行的禁用框，不会影响其他行。下面给你具体的实现方案：

先补全你的HTML结构（方便定位元素） #

假设你的完整行结构是这样的（给输入框加上类名方便精准选择）：

<div class="container-fluid" id="clonegrp">
  <!-- 第一行 -->
  <div class="row grpit">
    <div class="col-md-7">
      <!-- 启用状态的输入框，加类名enable-input -->
      <input type="text" name="it[]" class="form-control enable-input">
    </div>
    <div class="col-md-5">
      <!-- 禁用状态的输入框，加类名disabled-input -->
      <input type="text" name="disabled_it[]" class="form-control disabled-input" disabled>
    </div>
  </div>
  <!-- 第二行（可能还有更多克隆出来的行） -->
  <div class="row grpit">
    <div class="col-md-7">
      <input type="text" name="it[]" class="form-control enable-input">
    </div>
    <div class="col-md-5">
      <input type="text" name="disabled_it[]" class="form-control disabled-input" disabled>
    </div>
  </div>
</div>

方案1：用jQuery实现（如果项目已引入jQuery） #

// 用事件委托绑定keyup事件，兼容动态新增的行
$('#clonegrp').on('keyup', '.enable-input', function() {
  // 获取当前输入框的内容
  const inputVal = $(this).val();
  // 核心逻辑：先锁定当前输入框所在的.grpit行，再在该行内找禁用输入框
  $(this).closest('.grpit').find('.disabled-input').val(inputVal);
});

方案2：原生JS实现（无需依赖jQuery） #

// 给父容器绑定事件，兼容动态新增的行
document.getElementById('clonegrp').addEventListener('keyup', function(e) {
  // 判断触发事件的是不是启用状态的输入框
  if (e.target.classList.contains('enable-input')) {
    const inputVal = e.target.value;
    // 找到当前输入框所在的.grpit行
    const currentRow = e.target.closest('.grpit');
    // 在当前行内定位禁用输入框
    const disabledInput = currentRow.querySelector('.disabled-input');
    // 同步值
    if (disabledInput) disabledInput.value = inputVal;
  }
});

关键逻辑说明 #

• closest('.grpit')：这个方法会向上查找最近的.grpit父元素，精准锁定当前输入框所在的行，彻底避免影响其他行的元素。
• 事件委托：如果你的.grpit行是通过克隆动态新增的（比如点击按钮添加行），一定要用事件委托绑定到父容器（#clonegrp）上，不然新添加的行不会触发同步事件。

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