将引导单选按钮分组为不同列中的 btn 主按钮

Question

我有两个分组按钮的布局问题，它们在同一个组中但在不同的列中。这些按钮应该是简单的 btn btn-primary 引导按钮样式的单选按钮。 第一个问题是实际的单选按钮显示在 btn-primary 按钮中。单击 btn-primary 按钮时，它工作得很好。但是如果我碰巧检查了 btn-primary 按钮内的单选按钮，btn-primary 按钮将显示为已选中，但实际上不是（单选按钮未选中）。

我试图解决的第二个问题是让按钮内部的单选按钮消失。但我似乎找不到适用于不同列内的按钮分组的解决方案。

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>

非常感谢您的每一个帮助， 提前致谢，

a.j.stu

Answer 1

有很多方法可以实现您想要的。如果遵循使用单选按钮的方法，您应该在单选按钮上使用 ng-model 并使用可见性隐藏它们：隐藏属性。然后您可以使用 Angular 的 ng-class 在特定选择时在标签按钮上设置样式。您可以使用以下模板：

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

现在，每当用户单击按钮时，将检查单选按钮并更新模型值并相应地设置按钮样式。

Demo plunker Example

Answer 2

这有点矫枉过正，但这是一个带有“分布式”单选按钮组的 BS4 Card Deck。您可能需要更具体地使用选择器，以确保仅隔离您需要的按钮。

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