Jquery bootstrap multiselect optgroup selection
Solution 1
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();
});
Solution 2
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
Solution 3
You can use event.stopPropagation();
Solution 4
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);
Comments
-
d-man about 4 years
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.
-
d-man over 10 yearsIt 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 ?
-
PatrickDelancy over 10 yearsI believe that is from the click event handler on the list parent. Use event.preventDefault(). I'll update the answer to show this.
-
d-man over 10 yearsany help will be appreciated.
-
d-man over 10 yearsif you click on opt group label it does check all childs but still hiding drop down.