确定列表组项是否已取消选中答案

【问题标题】：Determine if a list group item has been unchecked确定列表组项是否已取消选中
【发布时间】：2017-02-17 20:11:03
【问题描述】：

我有一个引导模式窗口，其中有一个引导按钮列表组项。在我的 jquery/js 中，当单击其中一个按钮时，我启用了一个提交按钮，但是如果我单击模态窗口上的其他位置，则该按钮将被取消选中！如何查找此事件以便禁用我的提交按钮？或者如果我按下模态窗口的其他位置，我可以防止按钮被取消选中吗？

这是我的模态窗口。

$(".removeReason").off('click').on('click', function() {
  $("#removeMember").prop('disabled', false);
});

// I need a .removeReason event that gets triggered when any button is unchecked

<div id="removeMemberModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">@(ViewBag.IsTeacher == true ? "Remove Teacher" : "Remove Student")</h4>
      </div>
      <div class="modal-body">
        <p>
          <h4>Why do you want to remove this @(ViewBag.IsTeacher == true ? "Teacher" : "Student")</h4>
        </p>
        <p>
          <div class="list-group">
            <button type="button" class="list-group-item removeReason">Bad Reviews</button>
            <button type="button" class="list-group-item removeReason">Made offensive comment</button>
            <button type="button" class="list-group-item removeReason">Shows up late or misses class altogether</button>
            <button type="button" class="list-group-item removeReason">Would like to register a different @(ViewBag.IsTeacher == true ? "Teacher" : "Student")</button>
            <button type="button" class="list-group-item removeReason">Other</button>
          </div>
        </p>
        <p>
          @if(ViewBag.IsTeacher == true) {
          <div>The teacher and all registered students will be notified by email that he/she has been removed from this event.</div>
          } else {
          <div>The student will be notified that he/she has been removed from this event.</div>
          }
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="removeMember" data-member-id=@ViewBag.MemberId type="button" class="btn btn-primary" disabled>Submit</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

我通过为每个被按下的按钮添加一个活动类来解决这个问题。像这样

$(".removeReason").off('click').on('click', function() {
  $(".removeReason").removeClass('active');
  $(this).addClass('active');
  $("#removeMember").prop('disabled', false);
});

【讨论】：

【解决方案2】：

你找到了很好的解决方案，但是看看这个 .toggleClass 方法:) http://api.jquery.com/toggleclass/

$(".removeReason").click(function() {
  $( this ).toggleClass("active");
});

【讨论】：