選択可能な項目の数を制限するjquery-ui

Question

タイトルが言うように、私は特定のリスト内の選択可能な項目の数を制限しようとしていますが、私のコードにこの行を追加しなければならないことを発見したトリック：

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

私のコードは、そのコードから若干異なるないので、多分私はそれが間違って実装するが、以下の私の（作業）コードですよ。だから私がここで達成しようとしているのは、の合計がの値（たとえば5）に達するとすぐに、選択可能なすべてのアイテムを無効にする必要があるということです。 5の値に達すると、それ以上アイテムは選択可能ではなく、選択解除可能な状態になります。 JSFiddle：https://jsfiddle.net/ut1pgxcg/

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：あなたのコードは少し単純化することができように

<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> 

Answer 1

は思えます。 https://jsfiddle.net/u9z8t74u/

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); 
}); 

を参照してください。グローバルVARSはクロージャ内で吸収することができるが、これはIMO、単純なアプローチを取り、迅速かつ汚い修正です。