基于 CheckBox 动态启用/禁用 DropDownList

Question

我在局部视图中有以下内容，表示动态添加的一行：

<td>
    <input asp-for="Id" class="form-control" />   
</td>
<td>
    <input asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control" />
</td>
<td>
    <select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disable="disabled" class="form-control"></select>
</td>
<td>
    <input asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control" />
</td>
<td>
    <select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disable="disabled" class="form-control"></select>
</td>

我认为也许附加到 CheckBox 的 onclick="EnableDropDown()" 调用（它需要一个复选框和一个下拉参数）可能会起作用，但它不会保持状态，复选框也不会找到合适的落下。我可以通过单击循环遍历所有行并适当地启用/禁用下拉菜单，但这似乎是一个糟糕的解决方案。

我已经看到了相当多的解决方案，但没有一个简单的解决方案可以工作......要么是因为它们不是动态的，要么是由于多个复选框，或者它是一个 EnumSelectList 而不是一个简单的事实DropDown（有区别吗？）..

我不太精通 javascript，所以我对这个有点迷茫。

Answer 1

首先，您在 disabled 属性中缺少一个“d”

然后，如果您要动态添加行，这意味着在 dom 加载时不会添加事件，您可以使用渲染 dom 时已经存在的父选择器修改此行为，还可以使用 data-attributes 添加一些引用在输入和选择之间更容易处理这个

尝试使用以下代码

$(".parent-class").on("change",".checkbox-class", function() {
  var enabledDropdown = $(this).data("dropdown")
  $(`#${enabledDropdown}`).removeAttr("disabled")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="parent-class">
  <tr>
    <td>
    <input asp-for="Id" class="form-control" />   
</td>
<td>
    <input data-dropdown="MyDropDownId1" asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
    <select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disabled="disabled" class="form-control"></select>
</td>
<td>
    <input data-dropdown="MyDropDownId2" asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
    <select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disabled="disabled" class="form-control"></select>
</td>
  </tr>
</table>