Question

我尝试使用以下代码单击之前选择的按钮，使Bootstrap btn-group无法选择：

$(document).ready(function() {
  $('label.btn').click(function(e) {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="note_reactivity" class="btn-group notes" data-toggle="buttons">
  <label id="1" class="btn btn-primary">
    <input type="radio">1
  </label>
  <label id="2" class="btn btn-primary">
    <input type="radio">2
  </label>
  <label id="3" class="btn btn-primary">
    <input type="radio">3
  </label>
  <label id="4" class="btn btn-primary">
    <input type="radio">4
  </label>
</div>

“活动”类似乎被我在click事件上的代码删除了，但它刚刚重新出现。你知道怎么做吗？

Answer 1

您的代码不起作用，因为仍然存在附加到元素的基础Bootstrap单击事件处理程序，该单元将在您取消它之后立即将active类放回元素上。为了解决这个问题，您可以在代码上设置一个小延迟，以确保它在Bootstrap自己完成后发生。

另请注意，您需要手动取消选择基础单选按钮以及删除该类。试试这个

$(document).ready(function() {
  $('.btn-group').on('click', 'label.btn', function(e) {
    if ($(this).hasClass('active')) {
      setTimeout(function() {
        $(this).removeClass('active').find('input').prop('checked', false);
      }.bind(this), 10);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div id="note_reactivity" class="btn-group notes" data-toggle="buttons">
  <label id="1" class="btn btn-primary">
    <input type="radio">1
  </label>
  <label id="2" class="btn btn-primary">
    <input type="radio">2
  </label>
  <label id="3" class="btn btn-primary">
    <input type="radio">3
  </label>
  <label id="4" class="btn btn-primary">
    <input type="radio">4
  </label>
</div>

如何取消选择Bootstrap btn组中的单击按钮？

1 个答案: