Bootstrap: Radio button and checkbox items in dropdown menu

[suigintou]

Please add styles for displaying radio buttons and checkboxes in dropdown menu.

[mdo]

There should be no reason you cannot do that right now as the styles already exist in the forms section for a block of radios or checkboxes. The only problem you'll run into is clicks closing the dropdown menu, but we dont' currently support that.

[ocrdeveloper]

Here is my workaround for this:

I added the class "drop-menu-form" to the dropdown-menu so that you now have :

<ul class="dropdown-menu dropdown-menu-form">
    ... stuff here ...
</ul>

Then I added the following javascript

$('.dropdown-menu').on('click', function(e){
        if($(this).hasClass('dropdown-menu-form')){
            e.stopPropagation();
        }
});

[Vangi]

Another solution if you add the dropdown dynamically:

$(document).on("click", ".dropdown-multiselect", function (e) {
    var parent = $(this).parent(".btn-group");
    if (!parent.hasClass("open"))
        parent.addClass("open");
});

[stefaneg]

In AngularJS, I worked around this by using ng-show/hide, and font awesome checkmarks to display checkboxes. Looks very nice. I'm not using a form for submit, so this won't work in that context.

    <ul class="dropdown-menu">
        <li>
            <a ng-click="filter.clearPartyFilter()" >
                <i class="icon icon-check-empty" ng-show="filter.partyFiltering"></i>
                <i class="icon icon-check-sign" ng-hide="filter.partyFiltering"></i>
                <strong>Show all parties</strong>
            </a>
        </li>
        ....
    </ul>    

[philfreo]

A slight improvement to above answers...

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox">One</label></li>
  <li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>

// 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();
});

[roman-ku]

Any update on an official solution that does not require a workaround?

[CopyJosh]

I'm having a hard time getting these suggestions to work on mobile browsers fyi.