所以我的页面上有多个下拉列表，我想创建一个方法，如果在一个下拉列表中选择了一个值，另一个下拉列表将禁用，另一个下拉列表中无法选择任何值，反之亦然。我的 HTML 是：
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements(list1)">Select Months</span>
<ul id="list1_items" class="items" name="month">
<li><input type="checkbox" name="month" value="Apr-2021">April </li>
<li><input type="checkbox" name="month" value="May-2021">May </li>
<li><input type="checkbox" name="month" value="Jun-2021">June </li>
<li><input type="checkbox" name="month" value="Jul-2021">July</li>
<li><input type="checkbox" name="month" value="Aug-2021">August</li>
<li><input type="checkbox" name="month" value="Sep-2021">September</li>
<li><input type="checkbox" name="month" value="Oct-2021">October</li>
<li><input type="checkbox" name="month" value="Nov-2021">November</li>
<li><input type="checkbox" name="month" value="Dec-2021">December</li>
<li><input type="checkbox" name="month" value="Jan-2021">January </li>
<li><input type="checkbox" name="month" value="Feb-2021">February</li>
<li><input type="checkbox" name="month" value="Mar-2021">March </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements(list2)">Select Quarter</span>
<ul id="list2_items" class="items" name="quarter">
<li><input type="checkbox" name="quarter" value="Quarter1">Quarter 1- Apr - Jun</li>
<li><input type="checkbox" name="quarter" value="Quarter2">Quarter 2- Jul - Sep</li>
<li><input type="checkbox" name="quarter" value="Quarter3">Quarter 3- Oct - Dec</li>
<li><input type="checkbox" name="quarter" value="Quarter4">Quarter 4- Jan - Mar </li>
</ul>
</div>
如果有人可以请帮助我。谢谢你。
你可以用document.querySelector和document.querySelectorAll，然后设置disabled属性为true
let list1 = new Set();
let list2 = new Set();
document.querySelector('#list1_items').addEventListener('change', e => {
e.target.checked ? list1.add(e.target.value) : list1.delete(e.target.value);
if(list1.size)
document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = true);
else
document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = false);
});
document.querySelector('#list2_items').addEventListener('change', e => {
e.target.checked ? list2.add(e.target.value) : list2.delete(e.target.value);
if(list2.size)
document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = true);
else
document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = false);
});
这是代码笔
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句