jQuery UI MultiSelect小部件 - 无法取消选中复选框 [英] jQuery UI MultiSelect Widget - Can't uncheck checkbox

问题描述

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

I'm using 2 widgets that adds the selections and only allows the user to select 5 total between both dropdown widgets. Strangely once the 5 limit is reached, I can not uncheck the checkboxes! Anyone know why this is happening? I also noticed that if I say >5, the user can still choose 6 before is stopped. I'm having to use 4 to stop at 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逻辑 - 添加2个多选复选框

reference here for how I got to here: JS logic - adding 2 multiselect checkboxes

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

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

推荐答案

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

The OP (user3191137) is using Eric Hynds jQuery UI MultiSelect Widget drop down selector. The "click" method built in to the API assigns $(this) values specifically tied to the unique 'widget' id of each MultiSelect instance on the page.

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

This causes a problem trying to count the overall number of checkboxes across two or more selector instances on the page. So a separate control is required which can keep track of the number of checkboxes checked overall.

我的 jsFiddle 解决了这个问题。

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

I have added a message layer into my example just to help show the status during the selections.

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

The way I solved this issue was having a separate variable counting the number of checks called "ClikCount". Checking this value either allows a selection or removes the selection if more than the max of 5 in this case.

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小部件 - 无法取消选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！