限制可选项目的数量 jquery-ui答案

【问题标题】：Limit # of selectable items jquery-ui限制可选项目的数量 jquery-ui
【发布时间】：2016-04-28 19:30:02
【问题描述】：

正如标题所说，我正在尝试限制某个列表中可选项目的数量，但是在搜索 SO 时发现我必须将这一行添加到我的代码中并没有成功：

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

我的代码确实与他们的代码略有不同，所以也许我实现它是错误的，但下面是我的（工作）代码。所以我在这里试图归档的是，一旦 var total 达到某个值（例如 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>

【问题讨论】：

请添加相关的HTML。
要添加 zakaria 的评论，您应该将示例的工作版本放在 codepen 或 jsfiddle 中
两者都完成了，请参阅上面的编辑帖子。

标签： javascript jquery jquery-ui

【解决方案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);
});

全局变量可以被一个闭包吸收，但这是一个快速而肮脏的修复，采用更简单的方法，IMO。

【讨论】：