Tuesday, 29 January 2019

Bootstrap multiselect with n-option selected at a time

//////////////////////////////// HTML

<select multiple="multiple" id="ddl_Stations" class="multiselect">
                     <option value="Alagawadi">Alagawadi</option>
                     <option value="Attigundi">Attigundi</option>
                     <option value="Balehonnur.M">Balehonnur</option>
                     <option value="Bannur">Bannur</option>
                     <option value="Bennur">Bannur</option>
                     <option value="Chandapur">Chandapur</option>

              </select>



////////////////////////////// Bootstrap multi-select

$(document).ready(function () {
    $('.multiselect').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,
        maxHeight: 200
    });
});

////////////////////////////// Bootstrap multi-select with n-number options



$(document).ready(function () 
{
        $('.multiselect').multiselect({
          enableFiltering: true,
                         maxHeight: 400,
                         enableCaseInsensitiveFiltering: true,
                         nonSelectedText: 'Select Stations',
                         numberDisplayed: 2,
                         selectAll: false,
                         onChange: function (option, checked) {
                             // Get selected options.
                             var selectedOptions = jQuery('.multiselect option:selected');
                             if (selectedOptions.length >= 5) {
                                 // Disable all other checkboxes.
                                 var nonSelectedOptions = 
                                    jQuery('.multiselect option').filter(function () {
                                     return !jQuery(this).is(':selected');
                                 });
                                 nonSelectedOptions.each(function () {
                             var input = jQuery('input[value="' + jQuery(this).val() + '"]');
                                     input.prop('disabled', true);
                                     input.parent('li').addClass('disabled');
                                 });
                             }
                             else {
                                 // Enable all checkboxes.
                                 jQuery('.multiselect option').each(function () {
                             var input = jQuery('input[value="' + jQuery(this).val() + '"]');
                                     input.prop('disabled', false);
                                     input.parent('li').addClass('disabled');
                                 });
                             }
                         }
                     });
                 });


No comments:

Post a Comment

How to highlight selected text in notepad++

  –> To highlight a block of code in Notepad++, please do the following steps step-1  :- Select the required text. step-2  :- Right click...