这是一个简单的问题。我正在使用bootstrap v3.2.0在导航栏下拉菜单中创建一个复选框列表。
我只是想知道在点击每个复选框后是否有办法不取回复选框。
我提供了小提琴：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>
接受第一个正常运作的答案。
答案 0 :(得分：9)
您只需要阻止事件冒泡：
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
如果dropdown-menu是您的下拉列表，您可以指定另一个或使用ID。它的工作原理是Bootrstrap侦听根元素body上的click事件，以便在您单击页面时关闭弹出窗口。由于事件冒泡，点击事件会将DOM树向上传播到body，除非您阻止它使用stopPropagation方法执行此操作。