リストグループ項目がチェックされていないかどうかを確認する

Question

私はブートストラップモーダルウィンドウを持っています。その中にボタンのブートストラップリストグループ項目があります。私のjquery/jsでは、ボタンの1つがクリックされたときにサブミットボタンを有効にしますが、モーダルウィンドウのどこかをクリックするとボタンがチェックされなくなります！送信ボタンを無効にできるようにこのイベントを探すにはどうすればよいですか？ または、モーダルウィンドウのどこか他のボタンを押すと、ボタンがオフになるのを防ぐことはできますか？

ここは私のモーダルウィンドウです。

$(".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 -->

Answer 1

Iが押されます各ボタンにアクティブクラスを追加することによって、これを解決しました。 そう

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

Answer 2

良い解決策のように、あなたは見つけることが、この.toggleClass方法:) http://api.jquery.com/toggleclass/

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

のを見てみましょう