Grouped bootstrap radio buttons as btn-primary buttons in different columns - html

Question

I have problems with the layout of two grouped buttons, which are in the same group but in different columns. The buttons are supposed to be radio buttons in the style of simple btn btn-primary bootstrap buttons.
The first problem is that the actual radio button is displayed in the btn-primary button. When clicking the btn-primary button, it works just fine. But if I happen to check the radio button inside the btn-primary button, the btn-primary button will appear checked, but actually isn't (the radio button isn't checked).
The second problem I tried to solve is to make the radio button inside the button disappear. But I can't seem to find a solution that works with button grouping inside different columns.
Here's a picture of the modal dialog with the stated buttons. You can see the second btn-primary button appearing checked, even though the left "Type 1" button is actually checked.
HTML:
<div class="container">
<h3>{{ 'ADDGROUP_MODEL' | translate }}</h3>
<div class="row">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="column"><img class="img" src="http://via.placeholder.com/172x200" align="middle"><label class="btn btn-primary active"><input type="radio" id="radioAddModel1" name="groupModelRadio" autocomplete="off">{{
'ADDGROUP_CHOOSEMODEL1' | translate }}</label> </div>
<div class="column"><img class="img" src="http://via.placeholder.com/172x200" align="middle"><label class="btn btn-primary"><input type="radio" id="radioAddModel2" name="groupModelRadio" autocomplete="off">{{
'ADDGROUP_CHOOSEMODEL2' | translate }}</label> </div>
</div>
</div>
</div>
Every help is highly appreciated,
thanks in advance,
a.j.stu

Answer 1

There are many ways to achieve what you want. If followed by your approach of using radio buttons, you should make use of ng-model on radio buttons & hide them with visibility: hidden property. And then you can make use of angular's ng-class to have style on label buttons when particular selected.. You can have template like:
<label class="btn btn-primary" ng-class="{'selected': radioAddModel === '1'}">
<input type="radio" id="radioAddModel1" ng-model="radioAddModel" name="groupModelRadio"
value="1" autocomplete="off" class="hide">{{'ADDGROUP_CHOOSEMODEL1' | translate }}
</label>
<label class="btn btn-primary" ng-class="{'selected': radioAddModel === '2'}">
<input type="radio" id="radioAddModel2" ng-model="radioAddModel" name="groupModelRadio"
value"2" autocomplete="off" class="hide">{{'ADDGROUP_CHOOSEMODEL2' | translate }}
</label>
where classes can be:
.hide {visibility: hidden; }
.selected { background: green; }
Now whenever user clicks on button that radio button will be checked and model value will be updated & accordingly buttons will be styled.
Demo plunker Example

Answer 2

This is overkill, but here is a BS4 Card Deck with a "distributed" radio button group. You may need to be more specific with the selectors to make sure you isolate only the buttons you need.
Be mindful of the Bootstrap CSS override, and note the jquery.
$(function() {
$('label.btn').click(function() {
var $rb = $(this).find("input[type=radio]").prop('checked',true);
$('#log').text("Selected " + $("input[type=radio]:checked").attr('id') );
});
});
/* Overide Bootstrap's default styling that uses the child selector
.btn-group-toggle>.btn input[type=radio]
*/
.btn-group-toggle .btn input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div id="log">
</div>
<div class="container">
<div class="row">
<div class="col-8">
<div class="btn-group-toggle" data-toggle="buttons">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card </p>
<label class="btn btn-primary">
<input type="radio" name="ItemList" id="rblItem1" autocomplete="off">Item 1
</label>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card.</p>
<label class="btn btn-primary">
<input type="radio" name="ItemList" id="rblItem2" autocomplete="off">Item 2
</label>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>