Question

我有一个bootstrap multiselect，其中包含7个复选框项。对于他们中的3个（全部，已解决和打开），我需要它们作为单选按钮：当我选择已解决时，所有并打开必须取消选择。当我选择所有然后解决并打开必须取消选择。当我选择打开然后全部并且已解决时必须取消选择。是否有可能在不破坏多个菜单中的多选项的情况下实现这一目标？

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

我尝试使用'onchange'，但逻辑错误，因为它不知道刚刚点击的项目并运行每个项目使select / deselect仅从上到下项目工作：

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

bootstrap multiselect checkbox表现得像单选按钮

1 个答案: