Limit the number of selected option - "input.parent('.multiselect-option').addClass('');" is not working

Question

I have implemented the bootstrap multiselect option as per the http://davidstutz.github.io/bootstrap-multiselect/#further-examples documentation. Further more I want to limit selecting checkbox if more than 4. I have added the jquery for that as per the documentation given above. The problem is when I select more than 4 selected items it will not disable the parent class. (input.parent)

Below showing the jquery I have added as per the documentation

In here I can select more than 4 items..

    $('.listboxForCountry').multiselect({
        onChange: function (option, checked) {
            // Get selected options.
            var selectedOptions = $('.listboxForCountry option:selected');

            if (selectedOptions.length >= 4) {
                // Disable all other checkboxes.
                var nonSelectedOptions = $('.listboxForCountry option').filter(function () {
                    return !$(this).is(':selected');
                });

                nonSelectedOptions.each(function () {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('.multiselect-option').addClass('disabled');
                });
            }
            else {
                // Enable all checkboxes.
                $('.listboxForCountry option').each(function () {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('.multiselect-option').addClass('disabled');
                });
            }
        },
        maxHeight: 250,
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        buttonWidth: '100%',
        buttonTextAlignment: 'left'
    });

@Html.ListBoxFor(m => m.FormData.SelectedCountry, new SelectList(Model.Countries, "CategoryDisplayName", "CategoryDisplayName"), new { @class = "listboxForCountry" })

Did I missed anything on this?

Answer 1

I could find the answer to this. This was not working for me as per the bootstrap documentation. For the first time I couldn't able to disable the parent class, But I have found the answer for that,

The below code works as expected;

onChange: function (option, checked) {
        // Get selected options.
        var selectedOptions = jQuery('.listboxForCountry option:selected');

        if (selectedOptions.length >= 8) {
            // Disable all other checkboxes.
            var nonSelectedOptions = jQuery('.listboxForCountry option').filter(function () {
                return !jQuery(this).is(':selected');
            });

            nonSelectedOptions.each(function () {
                var input = jQuery('input[value="' + jQuery(this).val() + '"]');
                input.prop('disabled', true);
                var parentInput = input.parent('.form-check').parent('.multiselect-option');
                parentInput.addClass('disabled');
            });
        }
        else {
            // Enable all checkboxes.
            jQuery('.listboxForCountry option').each(function () {
                var input = jQuery('input[value="' + jQuery(this).val() + '"]');
                input.prop('disabled', false);
                var parentInput = input.parent('.form-check').parent('.multiselect-option');
                parentInput.removeClass('disabled');
            });
        }
    },