Невозможно удалить класс из групп кнопок начальной загрузки

Question

Я хотел, чтобы группа кнопок с кнопками использовала метку и вводил в качестве входных групп. Функциональность такова, что при нажатии на метку отключенного состояния пользователь должен увидеть предупреждение о состоянии, а затем отключить себя и переключиться, чтобы активировать другую кнопку. Я заметил, что Bootstrap добавляет классы активно и фокусируется на щелчке ярлыка, чтобы он выглядел активным. Поэтому я пытаюсь удалить код из 2 классов, но, похоже, он не работает должным образом.

<div id='btnGroupFrequencyCI' class="btn-group btn-group-justified" data-toggle="buttons"> 
     <label class="btn btn-custom border-radius-none notnowfeature disabled"> 
      <input type="radio" name="options" id="option1" autocomplete="off" value="monthly">Monthly 
     </label> 
     <label class="btn btn-custom border-radius-none active"> 
      <input type="radio" name="options" id="option2" autocomplete="off" value="annual"> Annual 
     </label> 
</div> 

    $("#btnGroupFrequencyCI").on('click', function(){      
     $(this).find('label.notnowfeature').removeClass('active').prop('active', false); 
     $(this).find('label').not('.notnowfeature').addClass('active').prop('active', true); 
    }); 

Answer 1

У меня есть несколько вещей, чтобы комментировать об этом, первый является то, что Bootstrap запускает «активный» класс и выключаться, но это не имеет функциональные возможности для «инвалидов» класса один. Поэтому вы правы, что это нужно запускать с помощью JavaScript. Другое дело, что если оставить только «активный» класс без «отключен», как это (уведомление я удалил «notnowfeature» класс):

<label class="btn btn-custom border-radius-none "> 
     <input type="radio" name="options" id="option1" autocomplete="off" value="monthly">Monthly 
    </label> 
    <label class="btn btn-custom border-radius-none active"> 
     <input type="radio" name="options" id="option2" autocomplete="off" value="annual"> Annual 
    </label> 

Тогда самозагрузки будет «тумблер» «активный» класс вкл и выкл между btn-группой меток, но эти ярлыки не будут иметь класс «disabled», который вы хотите.

Будучи, что сказал, у вас есть два варианта, создать правило CSS для отображения те же стили, что и кнопка самозагрузки «ОТКЛ», говоря, что-то вроде:

label:not(.active) { 
     /* Put any style you want for the disabled label */ 
     color: red; 
    } 

Или другой вариант будет использовать JQuery и добавление/удаление классов начальной загрузки «отключена/активная» (Эта опция JavaScript работает без изменения остальной части вашего кода):

$("#btnGroupFrequencyCI").on('click', function(){       
    //Cycle through each label inside #btnGroup and ask if they have those classes 
    $(this).find('label').each(function(){    
    if(!$(this).hasClass('active')){ 
     $(this).removeClass('disabled'); 
     $(this).addClass('active');   
    }else{ 
     $(this).removeClass('active'); 
     $(this).addClass('disabled') 
    } 
    });  
}); 

Примечания: для этого примера работать он должен использовать только один активный класс, на Кстати, я удалил другой класс, который вы использовали "notnowfe ature ", что было ненужным.

Надеюсь, это поможет!