javascript - Bootstrap MultiSelect clickable optgroups

Question

I am using Bootstrap multi-select for a list of countries and football leagues with those countries. I want the interface to be as easy as possible so I have enabled the following options

 enableClickableOptGroups: true,
 enableCollapsibleOptGroups: true,
 collapseOptGroupsByDefault: true,

The works great as it allows me to keep the initial list manageable but the user can expand to select individual leagues

The only flaw is that if you click anywhere on the row except exactly on the down arrow it selects all the items in that optgroup, which from a user experience point of view isnt great. So for example if I click to the far right of Albania but in the same row in my example it still selects all

I have created a JSfiddle here https://jsfiddle.net/mikehobson/w53c2vd8/8/

I want the behaviour that if I click the check box only it selects all the options under the optgroup, if I click anywhere else on that line it expands it but im not sure if this is possible or if I have done something wrong

question from:https://stackoverflow.com/questions/65902760/bootstrap-multiselect-clickable-optgroups

Answer 1

Waitting for answers