jQuery UI MultiSelect小部件 – 无法取消选中复选框
我正在使用2个小部件来添加选项，并且只允许用户在两个下拉小部件之间选择5个小部件。 奇怪的是，一旦达到5限制，我无法取消选中复选框！ 任何人都知道为什么会这样吗？ 我还注意到，如果我说> 5，用户仍然可以在停止之前选择6。 我不得不用4来阻止5？
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逻辑 – 添加2个多选复选框
我正在使用的UI小部件： http ： //www.erichynds.com/blog/jquery-ui-multiselect-widget
编辑让我重新开始，因为我最近学到的一些知识改变了我认为我知道的东西。
为什么我不能取消选中复选框
您无法取消选中复选框，因为如果检查的框超过4个，则通过从单击事件处理程序返回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 }); });
你可以这样做
$("select").multiselect({ selectedList:5, header: "Choose only Five items items!", click: function(e){ if( $(this).multiselect("widget").find("input:checked").length > 5 ){ return false; } } });
OP（user3191137）正在使用Eric Hynds jQuery UI MultiSelect Widget下拉选择器。 内置于API的“click”方法会分配$（this）值，这些值与页面上每个MultiSelect实例的唯一“widget”id特定相关。
这会导致尝试计算页面上两个或多个选择器实例的复选框总数时出现问题。 因此需要一个单独的控件，可以跟踪整体检查的复选框的数量。
我的jsFiddle解决了这个问题。
我在我的示例中添加了一个消息图层，以帮助显示选择期间的状态。
我解决这个问题的方法是使用一个单独的变量来计算称为“ClikCount”的检查数。 如果在这种情况下超过最大值5，则选中此值可以选择或删除选择。
HTML示例：
使用的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初始化所有Multi选择器：
$('.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."); } });