Bootstrap: установить начальную радиокнопку в HTML

Я использую кнопки JavaScript Bootstrap для стилизации некоторых переключателей, и я, похоже, не могу установить начальную кнопку, как отмечено.

Вот мой код:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

Первая кнопка имеет checked="checked", но она не указана как отмеченная.

Кнопки стилируются ОК после событий кликов, поэтому я не уверен, что происходит с ошибкой при начальной загрузке.

Версия для загрузки здесь: http://bootply.com/89566

Ответы

Ответ 1

Если вы используете HTML-тип HTML 5, просто используйте checked без какого-либо значения:

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

checked="checked" должен работать также, поэтому вам нужно будет уточнить, что не работает для вас.

Наличие атрибута checked в input обеспечит правильное состояние в поле формы
Добавление класса active в label приведет к правильному визуальному состоянию

Справочная документация.

Ответ 2

Если вы хотите, чтобы компонент Bootstrap button() распознавал входы checked, изначально вам нужно добавить некоторый jQuery, например..

$('[checked="checked"]').parent().addClass("active");

Это активирует активное состояние соответствующих кнопок/меток в группе.

Ответ 3

Как упоминал Скелли, активный класс - это то, что Bootstrap переключает, он не смотрит на проверенный атрибут. Вам не нужно делать это с Javascript, однако...

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

Дает вам то, что вы ищете.