根据所选金额动态禁用<option>元素

Question

我为用户提供了一个界面，他们可以从30个选项中选择（硬编码），显示在 bootstrap dualListBox中。

这很好用，但是我想将可以选择的最大选项数量设置为10。 之后，可以在左侧选择的所有选项都将被禁用。

如果用户删除了所选的选项，则其他选项可以再次供选择。

我意识到我将使用jquery来实现这个目标，但是我不确定如何计算所选数量以及如何将剩余选择作为目标来禁用或再次使用它们。

有关如何正确解决此问题的建议吗？

我在双列表框中使用的插件可以在这里找到：

Bootstrap dualListBox

Answer 1

首先我会绑定一个更改事件，然后我会检查所选项目的数量是否等于或超过最大元素数量，如果是，我将禁用它。 如果我理解你的问题是正确的，那就像是：

$('#selector-id').on('change', function(e){
var selectedElements = $(this).val();
if(selectedElements && selectedElements.length >= 10){
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});

（这不是经过测试的代码）