Question

我的两个分组按钮的布局有问题，这两个按钮位于同一组但位于不同的列中。这些按钮应该是简单的btn btn-primary bootstrap按钮风格的单选按钮。第一个问题是实际的单选按钮显示在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＆amp;用可见性隐藏它们：隐藏属性。然后，您可以使用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; }

现在每当用户点击按钮时，将检查单选按钮并更新模型值＆amp;相应的按钮将被设计。

Demo plunker Example

Answer 2

这是矫枉过正，但这是一个带有“分布式”单选按钮组的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>

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

2 个答案: