Переключатели Bootstrap меняются при выборе

Я использовал этот код Bootstrap 3, чтобы превратить радио в кнопки:

<div class = "btn-group" data-toggle = "buttons">
    <label class = "btn btn-primary">
        <input type = "radio" name = "sim_type" value = "option 1" checked>Option 1
    </label>
    <label class = "btn btn-primary">
        <input type = "radio" name = "sim_type" value = "option 2">Option 2
    </label>
</div>

Он хорошо работает в jsfiddle, но на моем веб-сайте цвет кнопок не меняется при нажатии. Всегда так:

Но представленное значение верное.

twitter-bootstrap-3 radio-button

26.04.2018 08:42

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

861

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я добавил этот код, чтобы добавить класс .active вручную:

// Change the color of selected radio button
$('label.btn').click(function() {
     $(this).parent('.btn-group').children('label.btn').addClass('active');
     $(this).removeClass('active');
});

Обновлено: Этот код не нужен. Вам просто нужно изначально добавить класс «активный» к одной из меток. Этот код хорошо работает без js:

<div class = "btn-group" data-toggle = "buttons">
    <label class = "btn btn-primary active">
        <input type = "radio" name = "sim_type" value = "option 1" checked>Option 1
    </label>
    <label class = "btn btn-primary">
        <input type = "radio" name = "sim_type" value = "option 2">Option 2
    </label>
</div>

но как радио можно превратить в кнопку, вы меняете архитектуру.

— 27.05.2018 09:36

24.05.2018 18:45