基于 CheckBox 动态启用/禁用 DropDownList

Posted 2023-05-08

【中文标题】基于 CheckBox 动态启用/禁用 DropDownList

【英文标题】：Dynamically Enable/Disable a DropDownList based on CheckBox

【发布时间】：2021-12-08 09:24:04

【问题描述】：

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

<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，所以我对这个有点迷茫。

【问题讨论】：

为什么你不能做你的 onclick 解决方案？如果您有复选框 id 和下拉列表 id，您可以通过 jQuery/DOM 获取 HTML 元素，获取复选框状态并完成工作。如果您不想在每次更改时获取复选框状态，只需在开始时获取它并将其存储在布尔值中。

【参考方案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>

【讨论】：

此代码不考虑在页面重新加载时保持复选框状态的导航器。其次，取消选中复选框时，它不会再次禁用下拉菜单。