引导多选复选框的行为像单选按钮

bootstrap multiselect checkbox behave like radio button

本文关键字：单选按钮 复选框      更新时间：2023-09-26

我有一个包含7个复选框项的引导多选。对于其中的3个，我需要它们作为一个单选按钮:当我选择解决，然后所有和打开必须取消选择。当我选择全部，然后解决和打开必须取消选择。当我选择打开，那么所有和解决必须取消选择。有可能在不破坏多个菜单中的多选的情况下实现这一点吗?

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

我尝试了'onchange'，但逻辑是不正确的，因为它不知道刚刚点击和运行每个项目的项目，使选择/取消选择只能从上到下的项目:

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

注意，您的选项应该包含在<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);
    }
})

小提琴。

相关文章：