如何用JQuery实现Checkbox控制Input禁用/启用（支持动态添加组件）

我明白你遇到的问题了——静态组件的禁用/启用逻辑没问题，但动态新增的组件就失效了对吧？这是因为普通的事件绑定只会作用于页面加载时已存在的元素，动态添加的元素没被绑定到事件。下面给你一个可行的解决方案，用事件委托来处理动态元素的交互：

1. 统一组件结构与标识 #

首先要保证动态添加的每组组件都有一致的结构和类名，同时用父容器把每组包裹起来，这样方便后续通过DOM层级关联Checkbox和对应的文本框。

示例初始HTML结构：

<div id="inputGroupsContainer">
  <!-- 初始的一组示例 -->
  <div class="input-group">
    <input type="checkbox" class="enable-toggle">
    <input type="text" class="controlled-textbox" disabled>
    <input type="text" class="free-textbox">
  </div>
</div>
<button id="addNewGroupBtn">添加新组</button>

2. 事件委托处理交互逻辑 #

把事件绑定到父容器上，而不是单个Checkbox，这样不管是页面初始就有的还是后来动态添加的Checkbox，触发事件时都会被父容器捕获到。

JavaScript实现代码：

// 获取核心元素
const groupsContainer = document.getElementById('inputGroupsContainer');
const addBtn = document.getElementById('addNewGroupBtn');

// 事件委托：监听所有Checkbox的切换事件
groupsContainer.addEventListener('change', function(e) {
  // 确认触发事件的是我们要的Checkbox
  if (e.target.classList.contains('enable-toggle')) {
    // 找到当前Checkbox所属的组容器
    const currentGroup = e.target.closest('.input-group');
    // 定位到组内需要控制的文本框
    const targetTextbox = currentGroup.querySelector('.controlled-textbox');
    // 根据Checkbox状态切换文本框的禁用状态
    targetTextbox.disabled = !e.target.checked;
  }
});

// 动态添加新组的逻辑
addBtn.addEventListener('click', function() {
  // 创建新的组元素
  const newGroup = document.createElement('div');
  newGroup.className = 'input-group';
  // 复用和初始组完全一致的结构
  newGroup.innerHTML = `
    <input type="checkbox" class="enable-toggle">
    <input type="text" class="controlled-textbox" disabled>
    <input type="text" class="free-textbox">
  `;
  // 将新组添加到容器中
  groupsContainer.appendChild(newGroup);
});

3. 关键逻辑说明 #

• 事件委托的优势：利用DOM事件冒泡特性，父容器能捕获所有子元素的事件，包括后续动态生成的元素，避免了每次新增组件都要重新绑定事件的麻烦。
• 组内元素关联：通过closest('.input-group')精准定位当前Checkbox所在的组，再用querySelector找到组内对应的文本框，确保每组的控制逻辑独立，不会互相干扰。
• 结构一致性：新增组时完全复用初始组的类名和结构，保证事件委托能正确识别到新元素，无需额外的配置。

这样修改后，不管你点击多少次添加按钮，新生成的每组Checkbox都能准确控制对应文本框的启用/禁用状态啦。

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