CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menu
nevf
nevf

Reputation: 4826

Include a checkbox in Twitter Bootstrap drop-down menu

I want to include checkbox in Twitter Bootstrap drop-down menu's but I'm unable to get the menu text (in <a>..</a>) to sit beside the checkbox. I have read up on the CSS used for Forms and have tried a variety of things to no avail.

This is what I think should work, but doesn't.

<li><label class="checkbox" ><input type="checkbox">aaa</label><a href="#" style="float:left"></a></li>

Neville

Upvotes: 8

Views: 27838

Answers (6)

jcvargas
jcvargas

Reputation: 501

Heare is a good example of that: https://codepen.io/bseth99/pen/fboKH

And heare is the code:

var options = [];



$('.dropdown-menu a').on('click', function(event) {

  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  }

  $(event.target).blur();


  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />



<br/>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li>
            <a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />&nbsp;Option 1</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />&nbsp;Option 2</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />&nbsp;Option 3</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox" />&nbsp;Option 4</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox" />&nbsp;Option 5</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox" />&nbsp;Option 6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Debasish
Debasish

Reputation: 369

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(function()   {
                $('#lstFruits').multiselect({
                    includeSelectAllOption: true
            });
        });
        </script>

</head>
<body>

    <select id="lstFruits" multiple="multiple">
        <option value="1">Choice01</option>
        <option value="2">Choice02</option>
        <option value="3">Choice03</option>
        <option value="4">Choice04</option>
        <option value="5">Choice05</option>
    </select>

</body>
</html>

Upvotes: 0

samheru
samheru

Reputation: 41

Try this jquery plugin for bootstrap : https://github.com/davidstutz/bootstrap-multiselect

Upvotes: 4

aiki
aiki

Reputation: 129

Wrap your checkbox into A-tag like this:

<li>
    <a>
        <label>
            <input type="checkbox">
            Some text
        </label>
    </a>
</li>

Also you may add this CSS rules 

.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}

Upvotes: 10

Tommaso
Tommaso

Reputation: 161

A line of javascript to resolve the problem in Oleg answer: http://jsfiddle.net/Wsc9r/

Upvotes: 12

0leg
0leg

Reputation: 408

Try this way But there is some problem

Upvotes: 5

Related Questions