如果在另一个选择中选择了此选项，如何禁用一个选择中的选项

Question

我有三个具有相同选项的选择组。如果在另一个选择中选择了该选项，如何禁用一个选择中的选项？

                        <select class="form-control" id="first_select" name="foo" required>
                            <option disabled selected value="0">Choose*</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <select class="form-control" id="second_select" name="foo2" required>
                            <option disabled selected value="0">Choose*</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4>4</option>
                            <option value="5">5</option>
                        </select>
<select class="form-control" id="third_select" name="foo3" required>
                                <option disabled selected value="0">Choose*</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4>4</option>
                                <option value="5">5</option>
                            </select>

Answer 1

您可以这样做：

$(".form-control").on("change", function() {
  let val = $(this).val();
  let selects = $(".form-control").not(this);
  selects.each(function() {
  $(this).find("option[value=" + val + "]").attr("disabled", "disabled");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="first_select" name="foo" required>
  <option disabled selected value="0">Choose*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
  <option disabled selected value="0">Wybierz zawód*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 2

注意，您在第二个和第三个选择中对值4的引用未正确关闭！这将使代码失败。对于选项1，要禁用其他选择选项：

function disableOthers(sender){
   var val = $(sender).val();

//To enable all if you change value.
 $('#second_select').children().attr('disabled', false);
    $('#third_select').children().attr('disabled', false);

	 $('#second_select').children('option[value="' + val + '"]').attr('disabled', true);
	 $('#third_select').children('option[value="' + val + '"]').attr('disabled', true);              
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" onchange="disableOthers(this)" id="first_select" name="foo" required>
  <option disabled selected value="0">Choose*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

  <select class="form-control" id="second_select" name="foo2" required>
                        <option disabled selected value="0">Choose*</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
<select class="form-control" id="third_select" name="foo3" required>
                            <option disabled selected value="0">Choose*</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>