我想创建一个函数，其中用户不应该能够从多个选择选项中选择超过'n'的值。 在我的例子中，我希望限制用户选择的值最多为4。
HTML:
<ul class="numberOfElementsList">
<li>0</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<select>
<ul class="numberOfElementsList">
<li>0</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="numberOfElementsList">
<li>0</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
jQuery:
if(numBer > 4) {
alert('You can not select more then 4.');
} else if(numBer == 4) {
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li.active').nextAll('li').hide();
$(this).nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li.active').nextAll('li').hide();
} else if(numBer == 3) {
if (indexNum == 3){
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(2)').nextAll('li').hide();
$(this).nextAll('li.active').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li::nth-child(2)').nextAll('li').hide();
} else {
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li.active, li:last-child').nextAll('li').hide();
$(this).nextAll('li.active').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li.active, li:last-child').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(3)').prevAll('li').show();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li:nth-child(3)').prevAll('li').show();
}
} else if(numBer == 2) {
if (indexNum == 2){
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(3)').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').find('li:last-child').hide();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li:nth-child(3)').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(4)').prevAll('li').show();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li:nth-child(4)').prevAll('li').show();
} else {
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(3)').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').find('li:last-child').hide();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li:nth-child(3)').nextAll('li').hide();
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li:nth-child(4)').prevAll('li').show();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li:nth-child(4)').prevAll('li').show();
}
} else {
$(this).closest('.breedOptionsWrapper').nextAll('.breedOptionsWrapper').find('li').nextAll('li').show();
$(this).prevAll('li').show();
$(this).nextAll('li').show();
$(this).closest('.breedOptionsWrapper').prevAll('.breedOptionsWrapper').find('li').nextAll('li').show();
}
这里我希望用户限制在最大4。 例如，如果用户选择1-2-1，1-1-2，3-1-0组合或任何其他组合，则应禁用其他选项值。 我试过很多东西，但都不工作。
谢谢
.reduce()tot值
隐藏和禁用属性，如果ParseFloat(opt.value)>； （maxtot-tot)null
const $prod = $(".prod");
const $opts = $prod.find("option");
const maxTot = 4; // Set here the desired total
$prod.on("change", function() {
const tot = [...$prod].reduce((tot, sel) => {
tot += parseFloat(sel.value);
return tot;
}, 0);
$opts.each((i, opt) => {
const is_hide = parseFloat(opt.value) > (maxTot - tot);
opt.disabled = is_hide;
opt.hidden = is_hide;
});
});<select class="prod">
<option value="0">Product 0</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<select class="prod">
<option value="0">Product 0</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<select class="prod">
<option value="0">Product 0</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>