javascript - Bootstrap 4 Toggle Checkbox within Dropdown menu

Question

I placed a checkbox styled with Bootstrap Toggle Plugin (http://www.bootstraptoggle.com/) in a Bootstrap 4 dropdown menu (https://getbootstrap.com/docs/4.0/components/dropdowns/). When I click the toggle, the menu gets closed immediately.

I can prevent this by using onclick="event.stopPropagation();" on the menu item (code from here: Keep Bootstrap dropdown open on click). But then, the toggle switch does not work anymore.

Is there a way to have the menu stay open when the toggle is clicked?

Answer 1

if you wrap your toggle inside a form-tag it should not close the dropdown.

http://jsfiddle.net/mjhr0f6d/2/

...
<form>
<input type="checkbox" checked data-toggle="toggle">wrapped inside form
</form>
...