如何通过从初始下拉列表中选择值来重新启用禁用的下拉列表

Question

目标： 创建一个禁用其他下拉列表 select 的脚本，如果项目是 select 从其中一个下拉列表 select 编辑的。或者，如果该项目未select编辑，则所有下拉菜单 select 再次变为 selectable发生了。

目标是让用户只能 select 从 X 数量的列表中选择一项（总计）——你可以有苹果、橙子或成对的，但你只能有一种水果（对于这个例子）

问题：即使默认没有值，我也无法在 selection 完成后再次使列表成为 selectable选项是 selected.

努力： 我已经在这个脚本中投入了几个小时，并且已经尽我所能。我查看了 Stack、Google 并搜索了其他论坛和公告板以及 Reddit。我发现了一些我希望能帮助我实现目标的东西，但由于我是新手，我无法理解它们，或者它们的适用性不足以帮助我实现我的目标。我有运行通过 javascript 验证程序的脚本，以确保我的语法正确，等等。我已经成功地实现了我的目标（目标只是停用其他下拉菜单），但我想让用户体验一流，对我来说，这意味着可以确保他们改变主意，而无需重新加载页面并丢失所有未提交的数据。

提问： 我希望得到帮助和指导，通过取消select select 使一切重新select ] 从禁用其他下拉列表的列表中编辑项目 selects；列表将动态生成。

代码：

<select class="selectClass">
    <option  value="">Apples</option>
    <option value="1">1 Apple</option>
    <option value="2">2 Apple</option>
    <option value="3">3 Apple</option>
</select>
<select class="selectClass">
    <option  value="">Oranges</option>
    <option value="1">1 Orange</option>
    <option value="2">2 Orange</option>
    <option value="3">3 Orange</option>
</select>
<select class="selectClass">
    <option value="" >Pears</option>
    <option value="1">1 Pears</option>
    <option value="2">2 Pears</option>
    <option value="3">3 Pears</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        $(".selectClass").on('change', function () {
            $(".selectClass").not($(this)).prop("disabled", "disabled")
        })
    })
</script>

Answer 1

$(function () {
    $(".selectClass").on('change', function (e) {
        if (e.target.value === "") $(".selectClass").not($(this)).attr("disabled", false)
        else $(".selectClass").not($(this)).prop("disabled", "disabled")
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectClass">
    <option  value="">Apples</option>
    <option value="1">1 Apple</option>
    <option value="2">2 Apple</option>
    <option value="3">3 Apple</option>
</select>
<select class="selectClass">
    <option  value="">Oranges</option>
    <option value="1">1 Orange</option>
    <option value="2">2 Orange</option>
    <option value="3">3 Orange</option>
</select>
<select class="selectClass">
    <option value="" >Pears</option>
    <option value="1">1 Pears</option>
    <option value="2">2 Pears</option>
    <option value="3">3 Pears</option>
</select>

如何通过从初始下拉列表中选择值来重新启用禁用的下拉列表

How to re-enable disabled dropdowns disabled by selecting value from the initial dropdown

javascript

select

dropdown

disable