Issue in checkbox on check or uncheck

Question

(1) When I click on checkbox then modal is open

(2) when scroll bar reaches bottom one button is enabled and click on this button then checkbox is checked

Issue

When I click on checkbox again then checkbox is not unchecked. Its remain checked

Is there way when I click on checkbox first time then modal is open, checkbox is checked on click button and when I click on checkbox second time then modal is not opened, checkbox is unchecked

Here is my jquery code

$(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 code

       <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

You need to remove e.preventDefault(); so that the checkbox can complete it operation and affect the HTML view with checked and unchecked mark. If you remove this then it will work exactly as how you expect. Below is the working example of the code you provided. (press esc to remove the bootstrap modal in the example)

 $(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() prevents the default behavior of event emitter.

I don't think if your checkbox would even be checked in first place when you click on it as you're preventing its default behavior with e.preventDefault();

This e.preventDefault(); won't let checkbox to turn checked or unchecked

 $('#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 

So, remove this line of check it manually in the code