Предварительно переключить кнопку в группе Bootstrap btn-group?

Я хотел бы установить выбранную кнопку в Bootstrap btn-group:

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
  <button type="button" class="btn btn-default">7</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">8</button>
 </div>
</div>

Как я могу выбрать опцию 5? Этот ответ предлагает, что я могу добавить класс active к кнопке, которая действительно работает изначально, но затем нажатие на другие кнопки не деактивирует эту кнопку, так как Я бы ожидал.

Вот скрипка: http://bootply.com/90490

Вот еще одна скрипка с классом active, показывающая, почему это не правильное решение: http://bootply.com/90491 - click на любой из других кнопок, и кнопка 5 остается активной.

Ответы

Ответ 1

Предполагая, что вы хотите, чтобы для каждой группы кнопок был один выбор, и что вы включили файл JavaScript для начальной загрузки, тогда должно работать следующее.

Разметка

<div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $(".btn").first().button("toggle");
});

Если вы хотите, например, предварительно переключить третью кнопку, вы можете использовать функцию среза следующим образом:

$(".btn").slice(2,3).button("toggle");

В качестве альтернативы вы можете назначать идентификаторы кнопкам.

Здесь моя скрипка: http://bootply.com/90501

Ответ 2

Я искал ответ на кнопку pre-toggle a и нашел это SO. Все они казались немного трудными, и я нашел ссылку на кнопки BootStrap 4, которые дали мне несколько советов о том, как работает BootStrap 3. Мое решение, я думаю, проще, поскольку оно может быть предварительно записано в html. Решение находится ниже:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked>5
    </label>
    <label class="btn btn-default">
        <input type="radio">6
    </label>
    <label class="btn btn-default">
        <input type="radio">7
    </label>
</div>

Как я уже сказал, это было вызвано документами BootStrap 4, но работает над BootStrap 3. Важными частями являются:

  • data-toggle="buttons" в btn-group div.
  • Класс active на ярлыке 5.
  • checked на <input type="radio"> для 5.

Я надеюсь, что это поможет другим.