Question

我有两个用于条款和条件以及隐私权政策的锚标记。当我单击此锚标记时，模态打开。这是模态代码

<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>

当用户单击模态上的同意按钮时，模态已打开，然后选中了复选框，并且复选框值将为1分配。这里的jQuery脚本代码

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

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

如果复选框长度大于1，则将启用submt按钮。

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

问题是，当我单击“同意”按钮，然后选中复选框并且复选框的值为1时，模态是打开的，但是当复选框长度大于1时，未启用提交按钮。这里是小提琴demo

Answer 1

问题是您仅在$( ".number" ).on( "click", function(){})上更新提交按钮。您需要添加的是即使单击同意按钮也可以更新提交的检查。这大致就是您的js的样子（HTML正是您在问题中输入的内容。）：

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

希望这会有所帮助。：）

Answer 2

使用：

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

Answer 3

您的代码中有一些错误：

您的HTML结构不正确（复制/粘贴错误吗？）
动态更改复选框的值时，它不会与click相匹配，并且不会触发任何事件。

因此，您必须自己触发事件，并且不要混淆click事件中的change事件

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

复选框长度大于1时，未启用“提交”按钮

3 个答案: