Держите кнопку в активном состоянии, пока она не будет отключена

Question

Это страница, над которой я работаю: https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/

Я хочу, чтобы кнопки оставались в активном состоянии, пока их не щелкнули, чтобы пользователь мог четко видеть, что у них есть выбрано.

Я прочитал и выполнил эти инструкции, но безрезультатно: Оставить кнопку в активном состоянии до тех пор, пока не нажмете ее снова

NB: «Кнопка» раньше была тумблер, который я выключил. Не уверен, что это вызывает проблему.

Я добавил это JQuery в свою тему:

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

А так же CSS:

.bundled_product_optional_checkbox.active {
	background-color: #cfb87c !important;
	border: 1px solid #cfb87c !important;
}

<label class="bundled_product_optional_checkbox">
  <input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
  " Add for "
  <span class="price">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">$</span>
    </span>
  </span>
    ::after
</label>

Оцените любые ответы. Пожалуйста, будьте добры.

Answer 1

Просто создайте свой собственный класс под названием active

<button class="Toggle Button">Toggle Button</button>

, затем создайте свой собственный класс active и задайте ему стиль css

.active{
            border: none;
            background: teal;
            color: white;
        }

Теперь в jQuery переключите активный класс при нажатии

$('.toggle-button').click( function() {
    $('.toggle-button').toggleClass('active');
});

Теперь у вас должен быть рабочий тумблер

Вот ссылка на мою ручку кода: https://codepen.io/prabodhpanda/pen/pogNqpQ

Answer 2

ответ обновлен ..

если вы не используете bootstrap, вы можете игнорировать эти классы и ссылки CDN:)

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

.bundled_product_optional_checkbox.active {
	background-color: #cfb87c !important;
	border: 1px solid #cfb87c !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>