Bootstrap 4 stacking radio btn-group

Question

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

<div class="container"> 
    <div class="row"> 
     <div class="btn-group" role="group" data-toggle="buttons"> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary active"><input hidden="true" type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1</label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary"><input hidden="true" type="radio" name="options" id="option2" autocomplete="off"> Radio 2</label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary"><input hidden="true" type="radio" name="options" id="option3" autocomplete="off"> Radio 3</label> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете просто сделать это путем добавления этого сценария:

$("input[type=radio]").on("change",function(){ 
    $('input:checked').parent().addClass("active"); // Change active with your own class name 
});