帶複選框的引導程序下拉允許多個複選框而不是一個

Question

我有一個引導程序下拉菜單，允許用戶在下拉列表中的某個項目旁邊添加複選框。但是，用戶可以添加多個複選框 - 所需的行爲是用戶應該只能選擇一個複選框。如果用戶選擇了一個複選框，則應該刪除另一個複選框。

$("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克拉斯次數的計數然而事情沒有工作。我只是想看看如果用戶點擊複選框時前面的複選框將被刪除。

Answer 1

複選框被創建以允許多次檢查，將其視爲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(); 
     } 
    } 

    }); 
});