Проблема в флажок на флажок или снимите флажок

Question

(1) Когда я нажимаю на флажок, открывается модальное

(2) когда полоса прокрутки достигает дна, активируется одна кнопка, и нажмите на эту кнопку, после чего флажок будет установлен

Issue

Когда я снова нажимаю на флажок, флажок не снимается. Его проверяют

Есть ли способ, когда я нажимаю на флажок в первый раз, когда модал открыт, флажок проверяется при нажатии кнопки, а когда я нажимаю на флажок во второй раз, то модальный не открывается, флажок не проверяется

Вот мой код 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(); не позволит флажку становиться отмеченным или не отмеченным

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

Итак, удалите эту строку, проверьте ее вручную в коде