如何禁用追加的克隆<tr>？克隆<tr>禁用功能异常求助

你遇到的核心问题有两个：

1. 事件绑定未覆盖克隆元素：原代码直接给静态input绑定change事件，克隆出来的新行里的input不会继承这个事件，导致后续操作失效。
2. 目标元素定位错误：通过index获取对应tr的方式，在克隆行之后会出现索引混乱，且禁用操作没有精准指向目标行，导致原行和克隆行同时被禁用。

1. 改用事件委托绑定事件 #

把事件绑定到父容器（比如#Table_2 tbody），利用事件冒泡机制，让动态生成的克隆元素也能触发事件。

2. 精准定位当前触发事件的行 #

直接通过触发事件的input元素向上查找父级tr，避免用index导致的定位错误。

3. 克隆时重置表单状态 #

克隆后要清空或重置新行里的输入框状态，避免继承原行的禁用属性或值。

修改后的代码 #

// 用事件委托绑定change事件，覆盖动态生成的元素
$('#Table_2 tbody').on('change', 'input[data-column="ctrl_Table3Column_8fa36"]', function() {
  const $this = $(this);
  // 直接获取当前input所在的tr，无需通过index定位
  const $currentTr = $this.closest('tr');
  const difval = $currentTr.find('input[data-column="ctrl_Table3Column_0opcc"]').val();

  if (difval === '0') {
    // 仅禁用当前行内的所有输入框
    $currentTr.find('input').prop('disabled', true);
  } else {
    // 克隆当前行，插入到当前行之后
    const $cloneTr = $currentTr.clone();
    // 重置克隆行的输入框状态：启用所有input，清空值（根据需求调整）
    $cloneTr.find('input').prop('disabled', false).val('');
    $cloneTr.insertAfter($currentTr);
  }
});

关键改动说明 #

• 事件委托：$('#Table_2 tbody').on('change', 'input[data-column="xxx"]', ...) 确保新克隆的input也能触发事件。
• 精准定位：$this.closest('tr')直接拿到当前触发事件的行，不会因为克隆行导致索引混乱。
• 克隆后重置：克隆行时重置输入框的禁用状态和值，避免继承原行的状态，保证新行是可操作的独立行。

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