如何只启用一个按钮作为可选项

Question

我有一个div，其中一些div将动态填充。因为我有一个按钮来选择特定的行。只能选择一行。 但是现在，当单击每个按钮时，所有行都是可选的。 如何限制只能选择一个按钮。

 <div class="row" ng-repeat="termRecords in $ctrl.quote.financeOption">
 <div class="col-lg-2 text-center" style="padding-top:.8%" ng-class="{'white-bg': !$ctrl.is{{termRecords.term}},'grey-bg': $ctrl.is{{termRecords.rateReference}}}">
                                    {{termRecords.totalAmountToRepay}} 
  </div>
 <div class="col-lg-1 text-center" style="padding-top:.8%" ng-class="{'white-bg': !$ctrl.is{{termRecords.term}},'grey-bg': $ctrl.is{{termRecords.rateReference}}}">
       {{termRecords.equivalentAPR}} 
   </div>
    <div class="col-lg-1" style="padding-top:.3%">
    <button type="select" class="btn btn-primary btn-sm" ng-click="$ctrl.selectQuote(termRecords.rateReference)" selected>Select</button>
     </div>

this.selectQuote = function(selectedRow) {
  this.isQuoteSelected = true;
  angular.forEach(this.quote.financeOption, function(value, key) {
    if(selectedRow == value.term + "MonthsSelected") {

      _this.finance.totalAmountToRepay = value.totalAmountToRepay;
      _this.finance.equivalentAPR = value.equivalentAPR;
      _this.finance.totalPremium = value.totalPremium;
     } else {
        _this['is' + value.term + 'MonthsSelected'] = false;

     }
   });

};

我应该只选择一行。如果不清楚请找到附图。

Answer 1

*我道歉，只看到“我不能使用JQuery”的评论，我会留下这个以防万一它可以帮助别人。 *

免责声明1：这是我第一次尝试帮助回答问题，请耐心等待！ :)我很高兴得到任何有关如何更好地回答的建设性反馈。

免责声明2：您似乎正在使用Bootstrap。那是对的吗？我还没有学习Bootstrap，所以请原谅我因为目前的无知而可能带来的任何错误。

我刚刚想出如何在我自己的项目中做到这一点，并希望这里的答案可以帮助其他人。

我有一个“选中”类，当我点击一个按钮时，我会将其应用于按钮。 使用JQuery我通过删除“selected”类来“取消选择”所有按钮，并将“selected”应用于单击的按钮。

$(".btn").on("click", function() {

  // Deselect all other buttons
  $('.btn').removeClass('selected');
  
  // Apply selected class
  $(this).toggleClass('selected');
})

如果您不希望取消选择页面上的其他按钮，则将特定类应用于只应选择一个按钮的按钮组，并使用if语句从组中删除所选类。 我为这个例子应用了一类“quoteButton”。 见下文：

$(".btn").on("click", function() {
        
  // If a quoteButton is clicked, deselect all other departmentButtons
  if($(this).hasClass('quoteButton')) {
    $('.quoteButton').removeClass('selected');
  }

  // Apply selected class
  $(this).toggleClass('selected');
})

我希望能有所帮助。我相信有更优雅的解决方案。