Submit button is not enabled when checkbox length is greater than 1

Question

I have two anchor tag for terms and condition, and privacy policy. When I click on this anchor tag then modal is open. here is modal 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 href="#" data-toggle="modal" data-target="#termsModal">"Terms and Condition"</a>

</div>
<div class="form-check form-check-radios">
    <label class="form-check-label">
        <input class="form-check-input number status" type="checkbox" name="" value="" id="privacyChk">I agree with
        <span class="form-check-sign"></span>
    </label> <a href="#" data-toggle="modal" data-target="#privacyModal">"Privacy Policy"</a>

<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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia.
</p>
  </div>
     <div class="modal-footer">
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" 
   id="agreeBtn">Agree</button>
  </div>
</div>

<div class="modal fade" id="privacyModal" 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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia.
</p>
  </div>
     <div class="modal-footer">
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" 
   id="agreeBtn2">Agree</button>
  </div>
</div>

Modal is open when user click on agree button on modal then checkbox is checked and checkbox value will be 1 assign. Here jquery script code

$('#agreeBtn').click(function(){
   $('#termsChk').attr('checked', true);
   $("#termsChk").val("1");
});

$('#agreeBtn2').click(function(){
   $('#privacyChk').attr('checked', true);
   $("#privacyChk").val("1");
});

If checkbox length is greater than 1 then submt button will be enabled.

$( ".number" ).on( "click", function() {
  if($( ".number:checked" ).length > 1)
    {
     $('#submit_register').prop('disabled', false);
    }
  else
    {
    $('#submit_register').prop('disabled', true);
    }  
  });


<input name="submit_register" id="submit_register" type='submit' class='btn btn-finish btn-fill btn-rose btn-wd' value='Submit' disabled/>

Issue is that Modal is open when I click on agree button then checkbox is checked and value of checkbox is 1, but submit button is not enabled when checkbox length greater than 1. here is fiddle demo

Answer 1

The issue is that you are updating the submit button only on $( ".number" ).on( "click", function(){}) . What you need to be adding is a check to update submit even on click of the agree buttons. This is roughly what your js should look like (The HTML is exactly what you put in the question.):

 $('#agreeBtn').click(function(){ $('#termsChk').attr('checked', true); $("#termsChk").val(1); enableDisableSubmit(); }); $('#agreeBtn2').click(function(){ $('#privacyChk').attr('checked', true); $("#privacyChk").val(1); enableDisableSubmit(); }); $( ".number" ).on( "click", function() { enableDisableSubmit(); }); var enableDisableSubmit= function() { if($( ".number:checked" ).length > 1) $('#submit_register').prop('disabled', false); else $('#submit_register').prop('disabled', true); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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 href="#" data-toggle="modal" data-target="#termsModal">"Terms and Condition"</a> </div> <div class="form-check form-check-radios"> <label class="form-check-label"> <input class="form-check-input number status" type="checkbox" name="" value="" id="privacyChk">I agree with <span class="form-check-sign"></span> </label> <a href="#" data-toggle="modal" data-target="#privacyModal">"Privacy Policy"</a> <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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia. </p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="agreeBtn">Agree</button> </div> </div> <div class="modal fade" id="privacyModal" 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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia. </p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="agreeBtn2">Agree</button> </div> </div> <input name="submit_register" id="submit_register" type='submit' class='btn btn-finish btn-fill btn-rose btn-wd' value='Submit' disabled/> 

Hope this helps. :)

Answer 2

采用：

$(":checkbox:checked").length > 1

Answer 3

You have some errors in your code:

• You HTML structure is not correct (wrong copy/paste ?)
• When you change dynamically the value of a checkbox, this will doesn't match to a click , and by the way it doesn't trigger any event.

So you have to trigger the event yourself, and don't mixed up a click event from a change event

 $('#agreeBtn').click(function() { $('#termsChk').attr('checked', true); $("#termsChk").val("1"); $('#termsChk').trigger('change'); }); $('#agreeBtn2').click(function() { $('#privacyChk').attr('checked', true); $("#privacyChk").val("1"); $('#privacyChk').trigger('change'); }); $('.number').change(function() { console.log('change'); if ($(".number:checked").length > 1) { $('#submit_register').prop('disabled', false); console.log('enabled'); } else { $('#submit_register').prop('disabled', true); console.log('disabled'); } }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></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 href="#" data-toggle="modal" data-target="#termsModal">"Terms and Condition"</a> </div> <div class="form-check form-check-radios"> <label class="form-check-label"> <input class="form-check-input number status" type="checkbox" name="" value="" id="privacyChk">I agree with <span class="form-check-sign"></span> </label> <a href="#" data-toggle="modal" data-target="#privacyModal">"Privacy Policy"</a> </div> <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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia. </p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="agreeBtn">Agree</button> </div> </div> </div> </div> <div class="modal fade" id="privacyModal" 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. Vivamus placerat est lectus, ac molestie orci tincidunt a. Aliquam ac viverra sapien, sed vestibulum ex. Fusce malesuada ut arcu at porttitor. Cras suscipit leo vel varius venenatis. Nullam aliquam non elit a lacinia. </p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="agreeBtn2">Agree</button> </div> </div> </div> </div> <input name="submit_register" id="submit_register" type='submit' class='btn btn-finish btn-fill btn-rose btn-wd' value='Submit' disabled/>