我需要调整我为我工作的学校创建的网站所使用的一些代码,以禁止同时选择某些选项。
向用户显示以下 HTML 下拉列表 6 次:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
用户不应同时选择艺术品和纺织品。他们可以选择艺术或纺织品 - 但不能同时选择两者。
例如:用户在 opt1 中选择“Art”,因此在其余 5 个菜单中禁用“Textiles”。如果用户返回并取消选择“艺术”,则应始终启用“纺织品”。希望你明白我的意思。
我已经有了防止多次选择同一选项的代码:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
然后用户单击“提交”,所有这些都会提交到 MySQL 服务器以供稍后审核。
菜单名为 opt1、opt2、opt3、opt4、optRes1 和 optRes2。
谢谢大家,
jack
最佳答案
我使用名为notallowed
的数据属性。您可以在那里设置应禁用的值。当值更改时,我们还会检查之前是否禁用了某些字段并重新启用它们。
$('select').change(function(){
var notAllowed = $(this).find('option:selected').data('notallowed');
var currentValue = $(this).val();
// Get the previous selected value.
var oldValue = $(this).data('old');
// Keep track of the previous selected value.
$(this).data('old', currentValue);
// Re-enabled all that was disabled by the previous selection.
if(oldValue) {
// Re-enable the old value in the other selects.
$('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
// Get the option.
var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
if(previousNotAllowed){
$('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
}
}
// If we selected a option with notallowed attribute we should disable that option in the other selects.
if(notAllowed){
var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
}
// Disable the current value in other selects.
$('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
关于javascript - 选择选项 1 时禁用选项 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41545676/