Сгруппированные переключатели начальной загрузки в виде кнопок btn-primary в разных столбцах

Question

У меня проблемы с расположением двух сгруппированных кнопок, которые находятся в одной группе, но в разных столбцах.Кнопки должны быть переключателями в стиле простых кнопок начальной загрузки btn-btn.Первая проблема заключается в том, что фактическая кнопка-переключатель отображается в кнопке btn-primary.При нажатии на кнопку btn-primary она работает просто отлично.Но если мне случится проверить переключатель внутри кнопки btn-primary, кнопка btn-primary будет отображаться как проверенная, но на самом деле это не так (переключатель не установлен).

Вторая проблема, которую япопытался решить, чтобы заставить радио кнопку внутри кнопки исчезнуть.Но я не могу найти решение, которое работает с группировкой кнопок внутри разных столбцов.

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

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>

Каждая помощь высоко ценится, заранее спасибо,

айсту

Answer 1

Это излишне, но здесь есть карточная колода BS4 с «распределенной» группой переключателей.Возможно, вам нужно быть более конкретным с селекторами, чтобы убедиться, что вы изолируете только те кнопки, которые вам нужны.

Помните о переопределении Bootstrap CSS и обратите внимание на 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>

Answer 2

Есть много способов достичь того, что вы хотите.Если после вашего подхода использования переключателей, вы должны использовать ng-модель для переключателей и скрыть их с помощью свойства visibility: hidden.И тогда вы можете использовать angular-класс ng, чтобы иметь стиль на кнопках надписей при выделении конкретного элемента. У вас может быть такой шаблон:

<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> 

, где классы могут быть:

.hide {visibility: hidden; }
.selected { background: green; }

Теперь каждый раз, когда пользователь нажимает на кнопку, переключатель будет отмечен, и значение модели будет обновлено, и соответственно будут стилизованы кнопки.

Пример демоверсии