Checkbox или radiobutton в меню dropdowns

Проблема в том что если вставить чекбокс, радиокнопку в меню dropdowns Bootstrap и кликнув по ним, меню сразу закроется.

Пример как это исправить:

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Dropdown <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">Пункт меню</a></li>
		<li class="dropdown-input"><label><input type="checkbox"> Checkbox</label></li>
		<li class="dropdown-input"><label><input type="radio" name="radio"> Radio 1</label></li>
		<li class="dropdown-input"><label><input type="radio" name="radio"> Radio 2</label></li>
	</ul>
</div>

<script>
$('.dropdown-input').click(function(event){
	event.stopPropagation();
});
</script>
HTML

Дополнительные стили CSS

.dropdown-input label {
	display: block;
	padding: 3px 20px 0 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
}
CSS
15.12.2016 , обновлено 17.10.2019
Предыдущая запись Подменю в dropdown Bootstrap

Комментарии

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

Другие публикации

Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018
17114
+7
Чекбоксы в виде кнопок
В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.
22.05.2020
232
0
PHP функции для checked и selected
Две мини функции которые облегчают выделения полей select, radio и checkbox до и после отправки форм.
16.03.2019
4355
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
4681
+7
Отметить или снять все чекбоксы в таблице
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
11.12.2016
2632
+1
jQuery UI Sortable - перетаскивание элементов
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
23.11.2017
16715
+6