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

Question

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
    });

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

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

Answer 1

Edit Let me start again as I've recently learned some knowledge that changed what I thought I knew.

Why can't I uncheck checkboxes

You can't uncheck the checkboxes because you are preventing the default action by returning false from the click event handler if there are more than 4 boxes that are checked.

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

This if statement evaluates to true if more than 4 checkboxes are checked. Since you don't allow checkboxes to be checked or unchecked, that means once 4 have been checked, they will always be checked ( until page refresh or programmatically uncheck ).

Why do I have to use 4 to stop at 5.

The reason for this isn't what I thought at first. I found out that when you click a checkbox, it's state is changed before entering the click event handler. However, if you return false from the click handler, it's state will revert to what it was previously.

What this means is that if you have 4 checkboxes checked, and you click a 5th checkbox, before you see the UI update with the 5th checked checkbox, programmatically, 5 checkboxes are checked. If you return false, this number will drop back to 4. If you return true, this number would stay at 5.

---

Solution

Here's the solution I came up with in a jsFiddle .

Notice. I'm not using your multiselect plugin here, as I don't think this has anything to do with it.

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

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

This code will only allow you to select 3 checkboxes at a time.

It checks if the clicked checkbox is not checked.. This means that the checkbox was previously checked. If the checkbox was checked previously, then we always want to allow the checkbox to be unchecked.

After that, it checks how many checkboxes are checked. I used 3 as the limit for how many checkboxes could be checked at a time. You could change (3) to (4) for your domain.

Here's your domain specific code:

$(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

You can do like this

$("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

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.

My jsFiddle addresses this problem.

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

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 example:

<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 used:

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

Javascript for Message and Counter:

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

Javascript to initialize all the Multi selectors:

$('.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 to Count/Control the clicks overall in Multi selectors:

(UnComment alerts to step through the process)

$("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.");
                }
            });