动态生成ID的HTML元素启用/禁用实现问题

我来帮你梳理下这个问题的解决思路和正确实现方式：

问题回顾 #

你需要在动态生成的表格行中，实现选择Sphere时禁用对应行的maxAltitude输入框，选择Cylinder时启用的功能，但因为元素ID是带rowCount的动态值，无法用固定ID绑定事件，之前的尝试要么报语法错误，要么没有效果。

先分析你之前的错误点 #

1. 第一段代码的语法错误：

   • 循环里的maxAlts[I]是大写的I，应该和循环变量一致用小写i
   • JavaScript里的布尔值是小写的true/false，不是True/False
   • 你的select元素没有设置name="shapeSelect"，input也没设置name="maxAlt"，所以getElementsByName根本找不到对应元素
   • 动态生成HTML时标签不闭合（比如<select id=\"shapeSelect_" + rowCount + ">少了闭合的>和</select>的位置错误）

2. 第二段代码无效果的核心原因：
   你给select元素绑定事件委托时用了.shapeSelector类，但动态生成select的时候没有给它添加这个类名，导致事件监听器找不到触发元素。

正确实现方案 #

下面是修正后的完整代码，我会标注关键细节：

1. 动态生成表格行的正确代码

// 假设rowCount是已定义并递增的变量
const table = $('#myTable');
table.find('tbody').append(`
  <tr class="tableRow">
    <td>
      <select id="shapeSelect_${rowCount}" class="shapeSelector">
        <option value="sphere">Sphere</option>
        <option value="cylinder">Cylinder</option>
      </select>
    </td>
    <td><input type="text" id="altitude_${rowCount}"></td>
    <td><input class="maxAltitudeInput" type="text" id="maxAltitude_${rowCount}" disabled></td>
  </tr>
`);

• 用模板字符串（`）替代字符串拼接，让HTML结构更清晰，避免拼接错误
• 给select添加了.shapeSelector类，用于事件委托匹配
• 修正了所有标签的闭合问题，确保HTML结构合法

2. 事件委托的正确代码

$('#myTable').on('change', '.shapeSelector', function() {
  // 判断当前选中的值是否为sphere
  const shouldDisable = $(this).val() === 'sphere';
  // 找到当前select所在的行，再获取该行的maxAltitudeInput
  $(this).closest('tr').find('.maxAltitudeInput').prop('disabled', shouldDisable);
});

• 用事件委托把监听绑定到静态的表格元素#myTable上，这样动态生成的行也能触发事件
• 使用.prop('disabled', ...)替代.attr()，因为disabled是布尔属性，用prop更准确
• 通过closest('tr')精准定位到当前select所在的行，再找该行内的输入框，避免影响其他行的元素

为什么这个方案可行？ #

事件委托的核心原理是利用事件冒泡，父元素（这里是表格）能捕获到子元素（动态生成的select）触发的事件，不需要给每个动态生成的元素单独绑定事件，完美适配你的动态ID场景。

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