如何在页面加载时自动禁用多选择下拉菜单，并根据另一个下拉菜单的值启用它?

Question

有2个MultiSelect下拉菜单。下面是我想要的代码:

1. 我想在加载页面时禁用multiselect02字段。
2. 仅当我选择选项"Item2"从multiselect01，我想要multiselect02字段被启用。

<select id="multiselect01" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
<select id="multiselect02" multiple="multiple">
<option>Item41</option>
<option>Item42</option>
</select>

Answer 1

试试这个

$(function() {
$('#multiselect01').change(function () {
let bEnable = false;
$(this).find('option:selected').each(function() {
let selText = $(this).text() || '';
if (selText == 'Item2')
bEnable = true;
});
if (bEnable) {
$('#multiselect02').removeClass('banned');
}
else {
$('#multiselect02').addClass('banned');
}  
});
});

.banned {
pointer-events: none;
cursor: pointer;
opacity: .5
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="multiselect01" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
<select id="multiselect02" multiple="multiple" class="banned">
<option>Item41</option>
<option>Item42</option>
</select>