CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Jym Morrison
Jym Morrison

Reputation: 185

bootstrap multiselect checkbox behave like radio button

I have a bootstrap multiselect which contains 7 checkbox items. For 3 of them (all, resolved and open) I need them to act as a radio button: When I select resolved then all and open must deselect. When I select all then resolved and open must deselect. When I select open then all and resolved must deselect. Is it possible to achieve that without breaking the multiselect in multiple menus?

Here is a jsfiddle: http://jsfiddle.net/sp3L1yz3/

I tried with 'onchange' but the logic is incorrect as it does not know the item that was just clicked and running a each make the select/deselect work only from top to bottom items:

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

Upvotes: 2

Views: 5880

Answers (1)

mccannf
mccannf

Reputation: 16659

Note that your options should be contained within <optgroup> tags, like this:

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

When you have this structure, you can implement what you are looking for in the onchange method like so:

$('#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.

Upvotes: 1

Related Questions