bootstrap multiselect checkboxes should be visible on the page

Question

I want the bootstrap multiselect to be visible on the page by default and it shouldn't toggle. Its functionality should be similar to default multiselect with check boxes.

I added this style to make it look as if it is on the page:

ul.multiselect-container{
    position: relative;
    box-shadow: none;
}

But I also want that it shouldn't get hidden when I click outside the page. Any Idea?

Answer 1

I have used the below code to show checkboxes onLoad

if ($('select').next().hasClass('btn-group')) {
    $('select').next().addClass('open');
}

Then I used onDropdownHidden to prevent dropdown close

$('.multiselect').multiselect({
    onDropdownHidden: function (event) {
        $('select').next().addClass('open');
    }
});

FIDDLE DEMO