时间戳

首页 > 解决方案 > 禁用选择元素中的一个选项并启用其他选项

javascript - 禁用选择元素中的一个选项并启用其他选项

问题描述

我有两个具有相同选项的选择元素。如果它已经在其他选择元素中被选中，我想禁用该选项。

这是我的两个选择：

<select class="form-control col-md-12" name="student1" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

<select class="form-control col-md-12" name="student2" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

这是我的javascript示例（但这不会）

$("select[name=student1]").change(function(){
    if ( $(this).val() == 'John' ) {
        $("select[name=student2]")
        .children('option[value=' + this.val() + ']')
        .attr('disabled', true);
    }
});

我知道如何使用 if 语句并禁用和启用选项元素，但我将在这个上使用数据库，我想知道最简单的方法来做到这一点，或者我是否可以禁用一个并自动启用其他元素。

如果我只是禁用，那么我更改所选选项，禁用的选项将保持禁用状态，我需要启用它们以确保它们已启用。

我希望你能明白。任何帮助将不胜感激！

编辑

我将使用带有选项值的数据库，这只是示例，所以我想知道如何在不知道值是什么的情况下启用和禁用它们。

标签： javascriptjquery

解决方案

我猜你问这个：

$(function() {
  // target selects
  $selects = $("select");

  // listener to change value
  $selects.on("change", function() {
    let $sibling = $(this).siblings("select");

    // setting all attrs disabled of sibling to false
    $sibling.find("option").prop("disabled", false);

    // setting attr disabled according the current value to true
    $sibling.find(`option[value="${$(this).val()}"]`).prop("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <select class="form-control col-md-12" name="student1" required>
        <option value="" disabled selected>Select Student</option>
        <option value="0">John</option>
        <option value="1">Paul</option>
    </select>

    <select class="form-control col-md-12" name="student2" required>
        <option value="" disabled selected>Select Student</option>
        <option value="0">John</option>
        <option value="1">Paul</option>
    </select>
</div>

推荐阅读