Включить флажок в раскрывающемся меню Twitter Bootstrap - PullRequest
Новая
       10

Включить флажок в раскрывающемся меню Twitter Bootstrap

8 голосов
/ 17 марта 2012

Я хочу включить флажок в раскрывающемся меню Twitter Bootstrap, но я не могу получить текст меню (в .. ), чтобы сидеть рядом с флажком. Я прочитал о CSS, используемом для форм, и пробовал разные вещи безрезультатно.

Это то, что я думаю, должно работать, но не работает. 

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

Невилл

Ответы [ 6 ]

12 голосов
/ 29 марта 2012

Строка javascript для решения проблемы в ответ Олега: http://jsfiddle.net/Wsc9r/

9 голосов
/ 03 сентября 2013

Оберните свой флажок в A-тег следующим образом: 

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

Также вы можете добавить эти правила CSS 

.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}
5 голосов
/ 19 марта 2012

Попробуйте таким образом Но есть некоторая проблема

4 голосов
/ 16 сентября 2013

Попробуйте этот плагин jquery для начальной загрузки: https://github.com/davidstutz/bootstrap-multiselect

1 голос
/ 14 марта 2017

Слышит хороший пример этого: https://codepen.io/bseth99/pen/fboKH

И вот код: 

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>
0 голосов
/ 06 июля 2015 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...