限制easyui组合框中的选择数量

Question

I have easyui combobox that is multi select. I am putting a limit on the number of items that can be selected so if you try to select more than the limit, it alerts the user and doesn't allow the item to be selected. This is my code.

$("#assessment_content_items_select_standards").combobox({
        data: $rootScope.assessmentItemsFilters.selectedStandards,
        valueField: 'value',
        textField: 'label',
        multiple: true,           
        onSelect: function (standard)
        {
            var selectedStandardsCount = 0;
            angular.forEach($rootScope.assessmentItemsFilters.selectedStandards, function (stan) {
                if (stan.selected == true) {
                    selectedStandardsCount++;
                }
            });

            if (selectedStandardsCount >= 25) {
                alert("You have reached the maximum selected standards allowed of 25");
            }
            else {
                standard.selected = true;
            }
        },
        onUnselect: function (standard) {
            standard.selected = false;
        }                       
    });

In the onSelect method I get the selected count and if it's more that 25 it just does an alert and it doesn't set selected to true for that selection.

The problem I'm having is that the UI still shows the item as selected even though the data shows as selected: false. I've tried the following to unselect but I see no difference.

standard.selected = false
$("#assessment_content_items_select_standards").combobox('unselect', standard);

My question is how do I stop options from being selected or is there a better way to put a limit on the dropdown?

Answer 1

Try this one:

$('#assessment_content_items_select_standards').combobox({
    onSelect: function (standard) {
        var count = $("div.combobox-item-selected").length;
        if (count > 25) {
            alert("You can only choose 25."); 
            $('#assessment_content_items_select_standards').combobox('unselect', standard. value);
        }
    }
});

Reference Documentation