Question

I have a button group and I would like to have a list of check boxes to select some options in the dropdown menu. Problem is, if you click on the checkbox, it closes the menu. How to keep it opened?

    <div class="btn-group">
      <button class="btn">Button 1</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
        </li>
        <li>
          b
        </li>
      </ul>
    </div>

Answer 1

You can bind a click-handler to the checkbox that prevents the event from bubbling up:

$('input').click(function (e) { e.stopPropagation(); });