Javascript 可选择项的限制jquery ui

正如标题所说，我试图限制某个列表中可选择项的数量，但搜索时发现我必须将这一行添加到代码中，但没有做到这一点：

if ($(".ui-selected, .ui-selecting").length > 4) {
   $(ui.selecting).removeClass("ui-selecting");
 }

我的代码确实和他们的代码有点不同，所以可能我实现错误了，但下面是我的（工作）代码。因此，我试图在这里归档的是，当var总计达到某个值（例如5）时，所有可选项都应该被禁用。当达到值5时，不应再选择其他项目，但仍保持不可选择状态。JSFiddle：

Javascript:

$( "#selectable" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
    } ).selectable({
        filter: "li:not(.taken)",
      stop: function() {
        var result = [];
        $( ".ui-selected", this ).each(function() {
                result.push($(this).data('price'));
        });

        var sum = result.length;

          $( "#select-result" ).html(sum);

        var total = 0;
        $.each(result,function() {
            total += this;
        });

         $( "#price-result" ).html(total);                  
      }
    });

HTML:

您选择了：0个插槽，成本为+-$0
1
2
3

似乎您的代码可以简化一点。看

var总计=0；
var selectedCount=0；
var阈值=6；
$（“#可选>li.抽奖槽：非（'.take'））。绑定（“单击”，函数（e）{
var价格=$（此）.data（'price'）；
if（$（this）.hasClass（'selected'））{
总价=总价；
选择计数--；
$（this.toggleClass（'selected'）；
}
否则，如果（price+total看起来您的代码可以简化一点。请参阅

var总计=0；
var selectedCount=0；
var阈值=6；
$（“#可选>li.抽奖槽：非（'.take'））。绑定（“单击”，函数（e）{
var价格=$（此）.data（'price'）；
if（$（this）.hasClass（'selected'））{
总价=总价；
选择计数--；
$（this.toggleClass（'selected'）；
}
否则如果（price+total请添加相关的HTML。要添加zakaria的评论，您应该将样本的工作版本放在codepen或JSFIDDLE中，请参阅上面编辑的帖子。请添加相关的HTML。要添加zakaria的评论，您应该将样本的工作版本放在codepen或JSFIDDLE中，请参阅上面编辑的帖子。
<span>You selected:</span> <span id="select-result">0</span> slots, costing you +- $<span id="price-result">0</span>

<ol id="selectable">
<li class="raffle-slot" data-price="2">1</li>
<li class="raffle-slot taken" data-price="2">2</li>
<li class="raffle-slot" data-price="2">3</li>
</ol>

var total = 0;
var selectedCount = 0;
var threshold = 6;

$( "#selectable>li.raffle-slot:not('.taken')" ).bind( "click", function ( e ) {
    var price = $(this).data('price');
    if ($(this).hasClass('selected')) {
            total = total - price;
            selectedCount--;
            $(this).toggleClass('selected');
    }
    else if (price + total <= threshold) {
            total = total + price;
            selectedCount++;
            $(this).toggleClass('selected');
    }
    $('#select-result').html(selectedCount);
    $('#price-result').html(total);
});