Блог

У меня есть некоторые элементы, использующие некоторые функции Bootstrap 4, а также некоторые пользовательские настройки.

 <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-selector make-active">
        <input type="radio" name="options">A
    </label>
    <label class="btn btn-outline-selector">
        <input type="radio" name="options">B
    </label>
    <label class="btn btn-outline-selector">
        <input type="radio" name="options">C
    </label>
    <label class="btn btn-outline-selector">
        <input type="radio" name="options">D
    </label>
</div>
  

Для этой группы я бы хотел, чтобы один из labels них был активным при загрузке страницы. Если я даю желаемому элементу active класс, он устанавливается при загрузке страницы, но быстро удаляется браузером.

Я попытался установить класс, используя следующее, но он всегда эффективен (иногда страница загружается без установки класса).

 $(document).ready(function(){
  $('label.make-active').addClass('active');
});
  

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

В идеале я мог бы установить этот активный статус на сервере.

Редактировать: похоже, что здесь может быть виноват Bootstrap

           if (activeElement) {
            $(activeElement).removeClass(CLASS_NAME_ACTIVE);
          }
  

Логика в bootstrap.bundle.js требует, чтобы наш input тип radio также был проверен active , чтобы предотвратить удаление класса.

       if (input.type === 'radio') {
        if (input.checked amp;amp; this._element.classList.contains(CLASS_NAME_ACTIVE)) {
          triggerChangeEvent = false;
        } else {
          var activeElement = rootElement.querySelector(SELECTOR_ACTIVE);

          if (activeElement) {
            $(activeElement).removeClass(CLASS_NAME_ACTIVE);
          }
        }
      }