選中或取消選中復選框中的問題

Question

（1）當我單擊復選框時，模式已打開

（2）當滾動條到達底部時，啟用一個按鈕，然后單擊此按鈕，然后選中復選框

問題

當我再次單擊復選框時，該復選框未被取消。 它保持檢查

有沒有辦法當我第一次單擊復選框然后打開模態時，復選框在單擊按鈕上被選中，而當我第二次單擊復選框然后未打開模態時，未選中復選框

這是我的jQuery代碼

$(document).ready(function() {
   var status_box = null;

    $('#termsChk').click(function(e){
    e.preventDefault();
    status_box = this;
    if($(this).is(':checked')) {
     $('#termsModal').modal('show');
    } 
 });

    $('#agreeBtn').click(function(){
      $(status_box).prop('checked', !status_box.checked);
    });

     $("#termsModal").modal({
        show: false,
        backdrop: 'static'
    });
 });

HTML代碼

       <div class="form-check form-check-radios">
               <label class="form-check-label">
                <input class="form-check-input number status" type="checkbox" name="" value="" id="termsChk">I agree with
                <span class="form-check-sign"></span>
                </label> <a style="color: #f96332;">"Terms and Condition"</a>   
           <input type="hidden" id="termsValue" name="termsValue" value="">
     </div>


            <!-----Terms and Condition Modal----->

            <div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
    <h4 class="modal-title" id="myModalLabel">Terms and Conditions</h4>
      </div>
        <div class="modal-body modelheight1" id="modalBody1">
              <p style="text-align:justify;" id="modalTerms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non ipsum at magna finibus rhoncus a vitae leo. Phasellus id nibh luctus, gravida elit pellentesque, consectetur sem. Nulla fringilla, nulla et egestas rhoncus, sem risus iaculis neque, eget aliquam mauris erat vitae nulla.
    </p>
         </div>
          <div class="modal-footer">
           <button class="btn btn-primary" data-dismiss="modal" disabled aria-hidden="true" id="agreeBtn">Agree</button>
        </div>
    </div>
 </div>

Answer 1

您需要刪除e.preventDefault(); 以便復選框可以完成它的操作並以選中和未選中標記影響HTML視圖。 如果刪除它，它將完全按照您的期望工作。 下面是您提供的代碼的工作示例。 （在示例中按esc鍵可刪除引導程序模態）

 $(document).ready(function() { var status_box = null; $('#termsChk').click(function(e){ status_box = this; if($(this).is(':checked')) { $('#termsModal').modal('show'); } }); $('#agreeBtn').click(function(){ $(status_box).prop('checked', !status_box.checked); }); $("#termsModal").modal({ show: false, backdrop: 'static' }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="form-check form-check-radios"> <label class="form-check-label"> <input class="form-check-input number status" type="checkbox" name="" value="" id="termsChk">I agree with <span class="form-check-sign"></span> </label> <a style="color: #f96332;">"Terms and Condition"</a> <input type="hidden" id="termsValue" name="termsValue" value=""> </div> <!-----Terms and Condition Modal-----> <div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Terms and Conditions</h4> </div> <div class="modal-body modelheight1" id="modalBody1"> <p style="text-align:justify;" id="modalTerms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non ipsum at magna finibus rhoncus a vitae leo. Phasellus id nibh luctus, gravida elit pellentesque, consectetur sem. Nulla fringilla, nulla et egestas rhoncus, sem risus iaculis neque, eget aliquam mauris erat vitae nulla. </p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" disabled aria-hidden="true" id="agreeBtn">Agree</button> </div> </div> </div> 

Answer 2

event.preventDefault()防止事件發射器的默認行為。

我不認為您的復選框在單擊時是否會被選中，因為您正在使用e.preventDefault();來防止其默認行為e.preventDefault();

這個e.preventDefault(); 不會讓復選框處於選中狀態或未選中狀態

 $('#termsChk').click(function(e){ e.preventDefault(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="form-check-input number status" type="checkbox" name="" value="" id="termsChk">I agree with 

因此，請在代碼中手動刪除此檢查行