Not close dropdown on selection of a checkbox element?

Question

This is an easy question. I am using bootstrap v3.2.0 to creating a list of checkboxes on a navbar dropdown menu.

I was just wondering if there is a way of not snapping the checkbox away after clicking on each checkbox.

I have provided the fiddle: http://jsfiddle.net/D2RLR/5649/

                    <div class="input-group">
                        <div class="input-group-btn">
                            <button tabindex="-1" class="btn btn-default" type="button">Select</button>
                            <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl"> Every day</span>
                                </a></li>
                                <li class="divider"></li>
                                <li><a href="#">
                                <input type="checkbox">
                                <span class="lbl"> Monday</span>
                            </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Tuesday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Wednesday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Thursday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Friday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Saturday</span>
                                </a></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl">
                                Sunday</span>
                            </a></li>
                                <li class="divider"></li>
                                <li><a href="#">
                                <input type="checkbox"><span class="lbl"> Last Weekday in month</span>
</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control">
                    </div>

Will accept the first answer that works correctly.

Answer 1

You just need to prevent event bubbling:

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

Where dropdown-menu is a class of your dropdown, you can specify another or use id instead. The reason why it works is that Bootrstrap listens click event on root element body in order to close popup when you click on the page. Due to event bubbling click event propagates up the DOM tree to the very body unless you stop it from doing it with stopPropagation method.

Demo: http://jsfiddle.net/D2RLR/7040/