Bootstrap dropdown checkbox select

Question

I\'m trying to customize a bootstrap dropdown with checkboxes and if I select a checkbox from dropdown the label name I want to be written on input dropdown delimited with \

Answer 1

The following code works in Bootstrap 4.1 if you add a function to show the menu on hover, but when you click the < li > then your checkboxes becomes unclickable. Anybody having a better solution please provide.

  
One
  
Two

And add these JS codes:

// Allow Bootstrap dropdown menus to have forms/checkboxes inside, 
// and when clicking on a dropdown item, the menu doesn't disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
  e.stopPropagation();
});

UPDATE

The below code is working good but checkboxes events are fired twice so had to choose the onchange event instead of onclick

  
One
  
Two

and the jquery code as follows:

$(document).on('click', '.dropdown-menu', function (e) {
    e.stopPropagation();
});