添加2个多选复选框 [英] Adding 2 multiselect checkboxes

问题描述

我正在使用2个jQuery UI小部件，这些小部件添加了选择，并且仅允许用户在两​​个下拉小部件之间选择5个复选框.一旦5被击中，我便可以防止用户选中更多的框，但不能取消选中.

I'm using 2 jQuery UI widgets that adds the selections and only allows the user to select 5 total checkboxes between both dropdown widgets. I'm able to prevent the user from checking more boxes once 5 is hit but cannot uncheck.

怎么能代替写这篇创建一个变量和+1或-1每一个复选框被选中的时间.不允许超过5

How could write this instead to create a variable and +1 or -1 every time a box is checked. Not allowing more than 5

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

UI widget i'm using:http://www.erichynds.com/blog/jquery-ui-multiselect-widget

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

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {

            if (!this.checked && $(".multiselect").children(":checked").length >= 5) {
                return false;
            }
        },
        selectedList:5
    });
});

推荐答案

您的代码几乎可以正常工作，但是在您的click函数中，this返回了整个选择列表，因此!this.checked始终为true，因为它是未定义的.

Your code almost works properly, but in your click function, this was returning the entire select list, so !this.checked would always be true because it was undefined.

如果使用ui变量(单击该选项)，它将为您提供正确的结果.

If you use the ui variable, which is the option that was clicked, it will give you the proper result.

click: function (event, ui) {
        if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
            return false;
        }
    },

以下是在jsfiddle中工作的示例: http://jsfiddle.net/3u7Xj/3/

Here is an example of it working in jsfiddle: http://jsfiddle.net/3u7Xj/3/

这篇关于添加2个多选复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！