1

С помощью Bootstrap сделал выпадающее меню, но в <li> поставил не ссылки, а input[type=checkbox]. Теперь при каждом клике выпадающее меню исчезает. Как его закрепить, чтобы оно не скрывалось пока кликаем по данным checkbox'ам?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle btn_search_filter" data-toggle="dropdown">
    <i class="fa fa-search"></i> Где искать?
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu search_filter">
    <li>
      <label for="users">Пользователи</label>
      <input id="users" type="checkbox" name="search_local" class="search_input" value="users" placeholder="Пользователи">
    </li>
    <li>
      <label for="portfolio">Резюме</label> 
      <input id="portfolio" type="checkbox" name="search_local" class="search_input" value="portfolio" placeholder="Резюме">
    </li>
    <li>
      <label for="adverts">Объявления</label> 
      <input id="adverts" type="checkbox" name="search_local" class="search_input" value="adverts" placeholder="Объявления">
    </li>
    <li>
      <label for="vacancies">Вакансии</label> 
      <input id="vacancies" type="checkbox" name="search_local" class="search_input" value="vacancies" placeholder="Вакансии">
    </li>
  </ul>
</div>

5
  • 1
    Покажите, пожалуйста, код, который есть у Вас на данный момент.
    – ymd
    21 авг 2018 в 6:26
  • добавьте область чекбоксов в исключения, покажите ваш код, добавьте в вопрос минимальный воспроизводимый пример вашей ошибки
    – kizoso
    21 авг 2018 в 10:35
  • вот, добавил код 21 авг 2018 в 14:23
  • Вот здесь рабочий код в первом ответе: stackoverflow.com/questions/50895806/…
    – Lenald
    22 авг 2018 в 6:04
  • @Lenald, честно говоря, я думал, что это встроенный функционал.. Но тоже решение))
    – entithat
    22 авг 2018 в 6:06

1 ответ 1

1

Можно использовать такую структуру:

$('.search_filter > li > label').click(function(e) {
    var checkbox = $(this).siblings('input[type=checkbox]'); // Нашли чекбокс
    checkbox.prop("checked", !checkbox.prop("checked"));     // Установили атрибут checked в зависимости от текущего значения
    return false;                                            // Сбили клик
});

$('.search_filter > li > label').click(function(e) {
    var checkbox = $(this).siblings('input[type=checkbox]');
    checkbox.prop("checked", !checkbox.prop("checked"));
    return false;
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle btn_search_filter" data-toggle="dropdown">
    <i class="fa fa-search"></i> Где искать?
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu search_filter">
    <li>
      <label for="users">Пользователи</label>
      <input id="users" type="checkbox" name="search_local" class="search_input" value="users" placeholder="Пользователи">
    </li>
    <li>
      <label for="portfolio">Резюме</label>
      <input id="portfolio" type="checkbox" name="search_local" class="search_input" value="portfolio" placeholder="Резюме">
    </li>
    <li>
      <label for="adverts">Объявления</label>
      <input id="adverts" type="checkbox" name="search_local" class="search_input" value="adverts" placeholder="Объявления">
    </li>
    <li>
      <label for="vacancies">Вакансии</label>
      <input id="vacancies" type="checkbox" name="search_local" class="search_input" value="vacancies" placeholder="Вакансии">
    </li>
  </ul>
</div>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.