[英]Bootstrap drop down with check box(s) allowing for multiple check boxes instead of just one
I have a Bootstrap drop down menu that allows a user to add a check box next to an item in the drop down list. 我有一个Bootstrap下拉菜单,允许用户在下拉列表中的项目旁边添加一个复选框。 However, the user is able to add multiple check boxes - the desired behavior is that a user should only be able to select one check box. 但是,用户可以添加多个复选框-期望的行为是用户只能选择一个复选框。 If a user has selected one check box the other check box should be removed. 如果用户选择了一个复选框,则另一个复选框应被删除。
$("document").ready(function() { $('.dropdown-menu').on('click', function(e) { if($('.checkbox').count() > 1){ if($(this).hasClass('dropdown-menu-form')) { e.stopPropagation(); } } }); });
.dropdown-menu-form { padding: 5px 10px 0; max-height: 100px; overflow-y: scroll; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="dropdown"> <a class="dropdown-toggle btn" data-toggle="dropdown" href="#"> Toggle dropdown <b class="caret"></b> </a> <ul class="dropdown-menu dropdown-menu-form" role="menu"> <li> <label class="checkbox"> <input type="checkbox">Checkbox 1 </label> </li> <li> <label class="checkbox"> <input type="checkbox">Checkbox 2 </label> </li> <li> <label class="checkbox"> <input type="checkbox">Checkbox 2 </label> </li> <li> <label class="checkbox"> <input type="checkbox">Checkbox 2 </label> </li> <li> <label class="checkbox"> <input type="checkbox">Checkbox 2 </label> </li> <li> <label class="checkbox"> <input type="checkbox">Checkbox 3 </label> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried to implement something with the count of the number of klass of .checkbox
however that did not work. 我试图用.checkbox
的数量来实现某种东西,但是那没有用。 I am just looking to have the behavior if the user clicks a check box the previous check box will be removed. 我只是想拥有一种行为,如果用户单击一个复选框,则先前的复选框将被删除。
Checkboxes are created to allow multiple checks, think of it as you can have this, that, and that
. 创建复选框以允许进行多次检查,将其视为you can have this, that, and that
。 You are looking for a radio button. 您正在寻找一个单选按钮。 Radio buttons are treated as a you get this
or you get that
. 单选按钮被视为“ you get this
或“ you get that
。
Try This 尝试这个
<li>
<label class="radio-btn">
<input type="radio">
Radio 1
</label>
</li>
JS JS
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.radio-btn').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.