我有三个具有相同选项的选择组。如果在另一个选择中选择了该选项,如何禁用一个选择中的选项?
<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>
您可以这样做:
$(".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>
注意,您在第二个和第三个选择中对值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>