How to set bootstrap multiselect min selected and max selected value

Question

I have a multiselect dropdown with 5 option. I want max 3 option a user can select at a time and min 1 option can be select at a time, how to do that?

my code is like that---

<select id="auditorview" multiple="multiple">
                          <option value="A1" >AHT</option>
                          <option value="A2" >Offers</option>
                          <option value="A3" >Handled</option>
                          <option value="A4" >Xyz</option>
                          <option value = "A5"> Abc</option>
        </select>
<script type="text/javascript" >
$(document).ready(function () {
$('#auditorview').multiselect({
buttonWidth: '150px'
});
});
$('#auditorview').on('change',function(){ 
foo = $(this).val();
if (!$("#auditorview option:selected").length) {
$("#auditorview option[value='"+foo[0]+"']").prop('selected', 'selected');
}

if($("#auditorview option:selected").length===4){
alert("Please select max 3  option !!!");
$("#auditorview option [value selected='"+foo[2]+"']").prop('selected', `false);`
}
})
</script>

hope this will help you http://stackoverflow.com/questions/11862787/select-multiselect-option-limit-up-to-2 — Har devgun, Oct 30 '15 at 06:34
@Har this is not working if multiselect is dropdown checkbox. — pranay das, Oct 30 '15 at 07:33

Shahzad Barkati · Answer 1 · 2015-10-30T07:00:15.347

1

UPDATED: ( answer updated as per requirement )

HTML:

<select id="demo" multiple="multiple">
<option value="">SELECT OPTION(S)</option>
<option value="Option1">Option-1</option>
<option value="Option2">Option-2</option>
<option value="Option3">Option-3</option>
<option value="Option4">Option-4</option>
<option value="Option5">Option-5</option>
<option value="Option6">Option-6</option>
</select><br/><br/>
Message: <label id="msg"></label>

JS:

$(document).ready(function () {
    $("#msg").text("Select atleast One Option");
    $("#demo option").on('click', function () {
        if ($("#demo option:selected").length > 3) {
            $("#msg").text('select Max 3 option at a time');
        } else {
            $("#msg").text("you selected: " + $("#demo option:selected").length);
        }
    });
});

JSFiddle DEMO

edited Oct 30 '15 at 07:00

answered Oct 30 '15 at 06:33

Shahzad Barkati

2,532
6
25
33

Sorry sir, as per the requirment I cant add button on there. – pranay das Oct 30 '15 at 06:38
it is not working, on click function is not called at all, and I want to desable all other remaining option, after alert – pranay das Oct 30 '15 at 07:00
Sir, this is not my requirment, actually acordin to selection I have to pop charts, but after 3rd selection if I select one more it will deselect anyone of previous selected option and alert a msg, then if I deselct all then it will select anyone randomly and also alert a msg. – pranay das Oct 30 '15 at 07:13
I able to do everything, but I am not able to unchecked or checked the checkbox, though I make them selected , so I receive the value as selected, but it is not checked the checkbox – pranay das Oct 30 '15 at 07:15

score 0 · Answer 2 · answered Oct 30 '15 at 08:26

Find the solution, it works perfect for me--

<select multiple id="s">
<option>Option 1
<option>Option 2
<option>Option 3
<option>Option 4
</select>
<script>
$(document).ready(function () {
 $('#s').multiselect();
})
jQuery("#s").on("change", function(){  
            var selectedOptions = $('#s option:selected');

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

                var dropdown = $('#s').siblings('.multiselect-container');
                nonSelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });
            }
            else if(selectedOptions.length <= 1){
                 var SelectedOptions = $('#s option').filter(function() {
                    console.log("1 select")
                    return $(this).is(':selected');
                });
                  var dropdown = $('#s').siblings('.multiselect-container');
                    SelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });
            }
            else {
                // Enable all checkboxes.
                var dropdown = $('#s').siblings('.multiselect-container');
                $('#s option').each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('li').addClass('disabled');
                });
            }
        });

How to set bootstrap multiselect min selected and max selected value

2 Answers2