javascript - 带有复选框的 Bootstrap 下拉列表允许多个复选框，而不是只有一个

Question

我有一个 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 的类数来实现一些东西，但是那没有用。如果用户单击一个复选框，我只是希望有这种行为，以前的复选框将被删除。

Answer 1

创建复选框以允许进行多项检查，将其视为您可以拥有这个、那个和那个。您正在寻找单选按钮。单选按钮被视为 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();
      }
    }

  });
});