Начальная настройка группы радиоустройств (проверка атрибута) Не работает

После бесчисленных часов исследований я все еще ошеломлен тем, как получить проверенный атрибут, работающий для групп кнопок для Bootstrap. Я пытаюсь по умолчанию "Отлично".

Несмотря на то, что я точно знаю, что радиовходы checked, а не selected, я даже пробовал selected, и ничего не работает.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
    Excellent </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Good">
    Good </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Poor">
    Poor </label>
</div>

Если требуется уточнение, сообщите мне.

Ответы

Ответ 1

В twitter bootstrap вы укажете значение по умолчанию, используя класс "active". Итак, для вашего примера, если вы используете Twitter Bootstrap, следующий код будет использовать Excellent по умолчанию.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default **active**">
        <input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
    Excellent </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Good">
    Good </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Poor">
    Poor </label>
</div>

При переключении по кнопкам вы добавляете/удаляете класс - "активный" из класса метки.

Например, проверьте это - http://getbootstrap.com/javascript/#buttons - Радио

Ответ 2

Похоже, что в вопросе и ответе используется bootstrap 3.0. У меня был тот же вопрос, но с загрузкой 2.3.

<div class="btn-group" data-toggle="buttons-radio">
    <button class="btn active"> Option 1</button>
    <button class="btn"> Option 2</button>
    <button class="btn"> Option 3</button>
</div>

Ответ 3

Две вещи:

  • Вы должны использовать разные идентификаторы для каждого из ваших элементов <input> - они должны быть уникальными!
  • Ваш пример работает для меня! Проверьте это на JSFiddle!