Поиск

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 1693
Предыдущая запись Подменю в dropdown Bootstrap

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

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018 5930
В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью PHP функций...
09.11.2017 3336
Итак, есть аккордеон, все вкладки закрыты, если в заголовок вставить ссылку на другую страницу, то она по своему...
05.07.2019 275
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
23.11.2017 10956
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
11.12.2016 1322
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
08.02.2018 3585