Question

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

这是我的模态窗口。

＆＃13;

$(".removeReason").off('click').on('click', function() {
  $("#removeMember").prop('disabled', false);
});

// I need a .removeReason event that gets triggered when any button is unchecked

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

您找到的解决方案很好，但请看一下这个.toggleClass方法:) http://api.jquery.com/toggleclass/

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

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

2 个答案: