Не закрыть выпадающий на выбор элементу checkbox?

Это простой вопрос. Я использую bootstrap v3.2.0 для создания списка флажков в раскрывающемся меню navbar.

Мне просто интересно, есть ли способ не отключать флажок после нажатия на каждый флажок.

Я предоставил скрипку: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>

примет первый ответ, который работает правильно.

1 ответов


вам просто нужно предотвратить событие пузырится:

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

здесь dropdown-menu - это класс вашего выпадающего списка, вы можете указать другой или использовать id. Причина, по которой он работает, заключается в том, что Bootrstrap прослушивает событие click на корневом элементе body для того, чтобы закрыть всплывающее окно при нажатии на страницу. Из-за события bubbling click событие распространяется вверх по дереву DOM до самого body Если вы не остановите его от этого с stopPropagation метод.

демо: http://jsfiddle.net/D2RLR/7040/