启用/禁用具有动态生成的名称/标签的 HTML 元素

Question

我有一个 HTML 表格，其中 ID 是从行计数器动态生成的：

$(table).find('tbody').append("<tr>name=\"tableRow\"</tr>"
    + "<td>"
      + "<select id=\"shapeSelect_" + rowCount + "></td>"
        + "<option onclick=\"sphereSelect()\" value=\"sphere\">Sphere</option>"
        + "<option onclick=\"cylinderSelect()\" value=\"cylinder\">Cylinder</option>"
      + "</select>"
    + "</td>"
    + "<td><input type=\"text\" id=\"altitude" + rowCount + "\"</td>"
    + "<td><input type=\"text\" name=\"maxAlt\" id=\"maxAltitude_" + rowCount + "></td>"
    + "</tr>"

选择球体时，我需要最大程度的输入。选择圆柱体后，应启用输入。

我找到的每个示例都非常简单，但需要确切知道 ID 是什么，以及它在我的代码中动态生成的位置。这是我发现的一个例子：

$(#maxAltitude).prop("disabled", true);

当 maxAltitude 更像：maxAltitude_10 时，我该怎么做？表中可能有 1-n 行，我需要专门禁用更改下拉选择的行中的最大高度。

我尝试过 jQuery 和 javascript，但似乎找不到一个好的方法：

<option onclick="shapeSelect()" value="sphere">Sphere</option>
<option onclick="shapeSelect()" value="cylinder">Cylinder</option>

function shapeSelect() {
    var shapeSelects = document.getElementsByName("shapeSelect");
    var maxAlts = document.getElementsByName("maxAlt");
    for(var i = 0; i < shapeSelects.length; i++) {
        switch(shapeSelects[i].value) {
        case "sphere":
            maxAlts[I].disabled = True;
            break;
        case "cylinder":
            maxAlts[i].disabled = False;
        }
    }
}

使用上面的代码，我得到：SyntaxError: unexpected token: identifier 每当 shapeSelect() 被触发时。

我将代码修改如下：

<table class="myTable" id="myTable"></table>

$(table).find('tbody').append("<tr>name=\"tableRow\"</tr>"
        + "<td>"
          + "<select id=\"shapeSelect_" + rowCount + "></td>"
            + "<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>"

$('#myTable').on('change','.shapeSelector',function(){
    var shouldDisableInput = $(this).val() === 'sphere';
    $(this).closest('tr').find('.maxAltitudeInput').attr('disabled',shouldDisableInput);
}

当我更改形状选择器下拉菜单时，仍然没有任何反应。

编辑：

对命名不匹配表示歉意。我的开发机器在一个气隙网络上，我在 Stack Overflow 上手动干扰了帖子。 rowCount 变量正在另一个函数中创建和递增。为了简洁起见，我试图只将相关代码放在帖子中。

我 缺少 shapeSelector 中的一个类。那是缺失的环节。现在可以了！

Answer 1

jQuery 实际上通过将this 绑定到触发事件的任何元素使这变得非常简单。

例如，您可以使用 jQuery 将事件侦听器绑定到它们，而不是为该值更改编写通用函数：

$('#myTable').on('change','.shapeSelector',function(){
    var shouldDisableInput = $(this).val() === 'sphere';
    $(this).closest('tr').find('.maxAltitudeInput').attr('disabled',shouldDisableInput);
}

你会在这个 sn-p 中注意到一些东西：

1. 我们将侦听器绑定到的元素是表，而不是单个行。那是因为行是动态的，我们不希望每次添加行时都必须不断添加侦听器。相反，我们将其添加到稳定的父级，但随后我们指定我们对匹配“.shapeSelector”的子级感兴趣
2. 监听器依赖于类名，而不是 ID，因为我们想要匹配它们的多个副本，而不仅仅是一个特定的副本。因此，您需要添加这些类名或匹配多个项目的类似方式
3. 在运行的回调函数中，您会注意到this 的几个用法。 jQuery 已将其绑定到触发事件侦听器的元素，在本例中为 <select> 控件。所以当我们使用this时，我们必须从这个角度来考虑。我们可以通过$(this).val() 获取它的值，我们可以通过$(this).parent() 找到它的父级，等等。在这种情况下，我正在前往最近的tr，然后从那里向下到达tr 的输入我想禁用。您需要根据您的 dom 进行一些调整。
4. 还要注意this 是一个DOM 元素，而不是一个jQuery 结果。这就是为什么当我们想在它上面运行更多的 jQuery 命令时，我们必须再次将它放入 $() 中。

这就是我的处理方式。我们这里没有您的完整代码，因此您必须进行一些调整，但希望这能将您推向正确的方向。

编辑

老实说，有很多命名不匹配和不匹配的东西。例如，您试图附加到 tbody 标记上，但该标记不存在。您使用的是 rowCount 变量，但从未设置或增加它。选择标签 sill 没有您尝试使用的类名。

我建议您逐段查看您的代码，问问自己您要告诉浏览器做什么，然后在脑海中执行该指令以确保计算机可以执行此操作。

HTML：

<table class="myTable" id="myTable"><tbody></tbody></table>

JavaScript：

var rowCount = 0;

function addRow(){
   $('.myTable tbody').append(`<tr name="tableRow">
        <td> 
          <select class="shapeSelector" id="shapeSelect_${rowCount}">
            <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>`);
   rowCount++;
}


$('.myTable').on('change','.shapeSelector',function(){
    var shouldDisableInput = $(this).val() === 'sphere';
    $(this).closest('tr').find('.maxAltitudeInput').attr('disabled',shouldDisableInput);
});

addRow();
addRow();
addRow();

https://jsfiddle.net/32vnjq81/