javascript - bootstrap 多选复选框表现得像单选按钮

Question

我有一个 Bootstrap 多选，其中包含 7 个复选框项目。 对于其中的 3 个(全部，已解决并打开)，我需要它们充当单选按钮: 当我选择 resolved 然后 all 和 open 必须取消选择。 当我选择所有然后解决和打开必须取消选择。 当我选择打开时，所有和解决的问题都必须取消选择。 是否可以在不破坏多个菜单中的多选的情况下实现这一目标？

这是一个 jsfiddle:http://jsfiddle.net/sp3L1yz3/

我尝试使用“onchange”，但逻辑不正确，因为它不知道刚刚单击的项目并运行 each 使选择/取消选择仅从上到下工作:

onChange: function(option, checked) {
var selectedOptions = $('#menu option:selected');
  $('#menu option:selected').each(function() {
    if ($(this).val().indexOf("resolved") > -1) {
      $('#menu').multiselect('deselect', 'all');
      $('#menu').multiselect('deselect', 'open');
      $('#menu').multiselect('select', 'resolved');
    }
    if ($(this).val().indexOf("open") > -1) {
      $('#menu').multiselect('deselect', 'all');
      $('#menu').multiselect('deselect', 'resolved');
      $('#menu').multiselect('select', 'open');
    }
    if ($(this).val().indexOf("all") > -1) {
      $('#menu').multiselect('select', 'all');
      $('#menu').multiselect('deselect', 'resolved');
      $('#menu').multiselect('deselect', 'open');
    }
  });
}

Answer 1

请注意，您的选项应包含在 <optgroup> 中标签，像这样:

<div class="selectdiv">
   <select name="menu[]" id="menu" class="multiselect" multiple="multiple">
      <optgroup label="filter one">
         <option value='all' selected='selected'>all</option>
         <option value='resolved'>resolved</option>
         <option value='open'>open</option>
         <option value='other1'>other1</option>
      </optgroup>
      <optgroup label='filter two'>
          <option value='one'>1</option>
          <option value='ten'>10</option>
      </optgroup>
      <optgroup label='filter three'>
          <option value='three'>three</option>
      </optgroup>
   </select>
</div>

当你有这个结构时，你可以像这样在 onchange 方法中实现你正在寻找的东西:

$('#menu').multiselect({
    maxHeight: 400,
    numberDisplayed: 1,
    onChange: function(option, checked) {
                var values = [];
                var optGroupLabel = $(option).parent().attr('label');
                $('#menu optGroup[label="'+optGroupLabel+'"] option').each(function() {
                   if ($(this).val() !== option.val()) {
                      values.push($(this).val());
                   }
                });
                $('#menu').multiselect('deselect', values);
    }
})

Fiddle here .