Question

我有一个Bootstrap下拉菜单，允许用户在下拉列表中的项目旁边添加一个复选框。但是，用户可以添加多个复选框 - 所需的行为是用户应该只能选中一个复选框。如果用户选中了一个复选框，则应删除另一个复选框。

＆＃13;

$("document").ready(function() {

  $('.dropdown-menu').on('click', function(e) {
    if($('.checkbox').count() > 1){
           if($(this).hasClass('dropdown-menu-form')) {
          e.stopPropagation();
      }
    }

  });
});

＆＃13;

.dropdown-menu-form {
  padding: 5px 10px 0;
  max-height: 100px;
  overflow-y: scroll;
}

＆＃13;

<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>

＆＃13;

我尝试使用.checkbox的klass数量来实现某些东西但是没有用。我只是想要在用户单击复选框的情况下执行该行为，将删除上一个复选框。

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();
      }
    }

  });
});

带有复选框的Bootstrap下拉列表允许使用多个复选框而不是一个复选框

1 个答案: