Jquery bootstrap multiselect optgroup selection

Question

I am using Jquery bootstrap multiselect plugin which seems pretty good and fulfill most of the requirements which i needed.

The only additional functionality i want is to add checkbox to OptGroup so if user wants to select complete group they can select all by clicking it.

any help appreciated.

http://davidstutz.github.io/bootstrap-multiselect/#examples

enter image description here

score 6 · Answer 1 · answered Jun 15 '16 at 13:46

6

No need to do any code to achieve your requirement.

There is an option called enableClickableOptGroups in this plugin to select all options of optgroup

http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-enableClickableOptGroups

answered Jun 15 '16 at 13:46

AsgarAli

2,201
1
20
32

PatrickDelancy · Accepted Answer · 2014-02-05T19:33:53.790

5

Try something like this:

$('.multiselect-group').before('<input type="checkbox" />');
$(document).on('click', '.multiselect-group', function(event) {
    var checkAll = true;
    var $opts = $(this).parent().nextUntil(':has(.multiselect-group)'); 
    var $inactive = $opts.filter(':not(.active)'); 
    var $toggleMe = $inactive;
    if ($inactive.length == 0) { 
        $toggleMe = $opts;
        checkAll = false;
    }
    $toggleMe.find('input').click();
    $(this).parent().find('input').attr('checked', checkAll);
    event.preventDefault();
});

edited Feb 05 '14 at 19:33

answered Jan 28 '14 at 03:32

PatrickDelancy

66
6

It works well only i can tweak the UI to look adjust checkbox alignment. the only problem is if you select optgroup checkbox drop down automatically gets close. any work around ? – d-man Feb 04 '14 at 14:50
I believe that is from the click event handler on the list parent. Use event.preventDefault(). I'll update the answer to show this. – PatrickDelancy Feb 05 '14 at 19:31
any help will be appreciated. – d-man Mar 14 '14 at 13:34
if you click on opt group label it does check all childs but still hiding drop down. – d-man Mar 14 '14 at 20:34

score 4 · Answer 3 · edited May 02 '19 at 17:27

4

You can use event.stopPropagation();

edited May 02 '19 at 17:27

Jean-François Fabre

137,073
23
153
219

answered Apr 17 '14 at 08:09

naxxateux

133
3
8

score 1 · Answer 4 · edited May 27 '14 at 14:12

After I checked an option group and then unchecked it, if I wanted to check it again, it would check all options from the group, but the group remained unchecked.

In order for the option group to be properly displayed as checked/unchecked after several retries, replace:

$(this).parent().find('input').**attr**('checked', checkAll);

with

$(this).parent().find('input').**prop**('checked', checkAll);

score 0 · Answer 5 · answered Oct 09 '18 at 06:42

0

in your code put this line of code only

enableClickableOptGroups: true

this will enable the option to select group

http://davidstutz.de/bootstrap-multiselect/#getting-started

answered Oct 09 '18 at 06:42

Junip Dewan

759
8
8

Jquery bootstrap multiselect optgroup selection

5 Answers5