Question

我正在使用2个添加选项的小部件，只允许用户在两个下拉小部件之间选择5个小部件。奇怪的是，一旦达到5限制，我无法取消选中复选框！任何人都知道为什么会这样吗？我还注意到，如果我说＆gt; 5，用户仍然可以在停止之前选择6。我不得不用4来停止5？

<select id="dropdown1" multiple="multiple" class="multiselect">
<select id="dropdown2" multiple="multiple" class="multiselect">

JS

$(document).ready(function() {
    $(".multiselect").multiselect({
    header: "Choose up to 5 areas",
    click: function(event,ui){
               if($(".multiselect").children(":checked").length > 4){               
                    return false;

        }},

      selectedList:5
    });

在这里参考我如何到达这里：JS logic - adding 2 multiselect checkboxes

我正在使用的UI小部件：http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Answer 1

编辑让我重新开始，因为我最近学到了一些改变了我认为的知识。

为什么我不能取消选中复选框

您无法取消选中复选框，因为如果检查的框超过4个，则通过从Click事件处理程序返回false来阻止默认操作。

if ($('.multiselect').children(':checked').length > 4)
    return false;

如果选中4个以上的复选框，则此if语句的计算结果为true。由于您不允许选中或取消选中复选框，这意味着一旦选中4，将始终检查它们（直到页面刷新或以编程方式取消选中）。

为什么我必须使用4来停止在5。

原因不是我一开始的想法。我发现当你单击一个复选框时，它的状态会在进入click事件处理程序之前被更改。但是，如果您从点击处理程序返回false，则其状态将恢复为之前的状态。

这意味着，如果您选中了4个复选框，并且单击第5个复选框，则在以编程方式查看带有第5个已选中复选框的UI更新之前，将选中5个复选框。如果你返回false，这个数字将回落到4.如果你返回true，这个数字将保持为5。

解决方案

以下是我在jsFiddle中提出的解决方案。

通知。我没有在这里使用你的多选插件，因为我认为这与它没有任何关系。

$('.multi-select').click(function (e) {
    if (!this.checked) return true;

    if ($('.multi-select:checked').length > 3)
        return false;
});

此代码只允许您一次选择3个复选框。

它检查是否未选中单击的复选框。这意味着之前已选中该复选框。如果先前已选中该复选框，则我们始终希望取消选中该复选框。

之后，它会检查选中的复选框数。我使用3作为限制，一次可以检查多少个复选框。您可以为您的域名更改（3）到（4）。

这是您的域名特定代码：

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas",
        click: function (event, ui) {
            if (!this.checked) return true; //Allow previously checked checkboxes to be unchecked.

            if ($(".multiselect").children(":checked").length > 4) { //Only allow 4 checkboxes to be checked simultaneously.
                return false;
            }
        },
        selectedList:5
    });
});

Answer 2

你可以这样做

$("select").multiselect({ 
      selectedList:5,
      header: "Choose only Five items items!",
 click: function(e){
   if( $(this).multiselect("widget").find("input:checked").length > 5 ){

       return false;
   } 
     }
  });

Answer 3

OP（user3191137）正在使用Eric Hynds jQuery UI MultiSelect Widget下拉选择器。内置于API的“click”方法会分配$（this）值，这些值与页面上每个MultiSelect实例的唯一“widget”id特别相关。

这会导致尝试计算页面上两个或多个选择器实例的复选框总数时出现问题。因此需要一个单独的控件来跟踪整体检查的复选框的数量。

我的jsFiddle解决了这个问题。

我在我的示例中添加了一个消息图层，以帮助显示选择期间的状态。

我解决这个问题的方法是使用一个单独的变量来计算名为“ClikCount”的检查次数。如果在这种情况下超过最大值5，则选中此值可以选择或删除选择。

HTML示例：

<p class="message success">Check up to 5 checkboxes in total.</p>
<div class="box">
<select id="dropdown_1" multiple="multiple" class="multiselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select></div>
<div class="box">
<select id="dropdown_2" multiple="multiple" class="multiselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select></div>

使用的CSS：

.box{float:left;margin:10px 0;}
.multiselect{width:300px;}
.error { background:#FBE3E4; color:#8a1f11; border-color:#FBC2C4 }

消息和计数器的Javascript：

var warning = $(".message");
    var ClikCount = 0;

Javascript初始化所有多重选择器：

$('.multiselect').multiselect({
                multiple: true,
                height: '175px',
                //header: 'Choose up to 5 areas',
                noneSelectedText: 'Choose up to 5 areas Total',
                selectedText: function(numChecked, numTotal, checkedItems){
                  return numChecked + ' of ' + numTotal + ' checked';
                },
                selectedList: false,
                show: ['blind', 200],
                hide: ['fade', 200],
                position: {
                    my: 'left top',
                    at: 'left bottom'
                }

            });

Javascript计算/控制多重选择器中的整体点击次数：

（UnComment提醒您逐步完成此过程）

$("input[type = 'checkbox']").change(function () {
                var chekt = ($(this).is(':checked'));
                //alert("Is this.checked =" + chekt);
                if (chekt == true) {
                    if (ClikCount <= 4) {
                        warning.addClass("success").removeClass("error").html("Check a few boxes.");
                        ClikCount = ClikCount + 1;
                        //alert("count = " + ClikCount);
                    }
                    else {
                        warning.addClass("error").removeClass("success").html("You can only check five checkboxes!");
                        $(this).attr("checked",false);
                        //alert("count = " + ClikCount);
                    }
                }
                else {
                    ClikCount = ClikCount - 1;
                    warning.addClass("success").removeClass("error").html("Check up to 5 checkboxes in total.");
                }
            });

jQuery UI MultiSelect小部件 - 无法取消选中复选框

3 个答案:

为什么我不能取消选中复选框

为什么我必须使用4来停止在5。

解决方案