[英]Bootstrap drop down with check box(s) allowing for multiple check boxes instead of just one
我有一個Bootstrap下拉菜單,允許用戶在下拉列表中的項目旁邊添加一個復選框。 但是,用戶可以添加多個復選框-期望的行為是用戶只能選擇一個復選框。 如果用戶選擇了一個復選框,則另一個復選框應被刪除。
$("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>
我試圖用.checkbox
的數量來實現某種東西,但是那沒有用。 我只是想擁有一種行為,如果用戶單擊一個復選框,則先前的復選框將被刪除。
創建復選框以允許進行多次檢查,將其視為you can have this, that, and that
。 您正在尋找一個單選按鈕。 單選按鈕被視為“ you get this
或“ you get that
。
嘗試這個
<li>
<label class="radio-btn">
<input type="radio">
Radio 1
</label>
</li>
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.