javascript - 使用 jquery 选择复选框后表单按钮不起作用

Question

我添加了一个 jQuery 脚本来检查复选框是否被选中。 如果选中做某事，如果不做做其他事情。 这是我的 jQuery 代码:

jQuery('#mybtn').click(function (e) {
    e.preventDefault();                                         
    if (jQuery('#mytc').is(':checked')) {

        jQuery('#myfrm').attr('action', 'http://test.php');
                
        jQuery('#checkerror').html('');

    } else {
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }

 });

<form id="myfrm">
  <p>Lorem ipsum dolor</p>
  <input type="checkbox" id="mytc" value=""/>
    <label class="yogatctxt">I agree to the <a href="#" target="_blank">Terms and Conditions</a>.</label><br>
  <span id="checkerror" style="color: red;font-size: 12px;"></span>
  <br>
   <br>
  <input type="submit" id="mybtn" value="Proceed to Checkout"/> 
</form>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

因此，当我提交处理结账按钮时，它仍然显示相同的页面。问题出在哪里？

Answer 1

在未选中该复选框的情况下使用阻止默认值。

jQuery('#mybtn').click(function (e) {
                                            
    if (jQuery('#mytc').is(':checked')) {
        jQuery('#myfrm').attr('action', 'http://test.php');
            
        jQuery('#checkerror').html('');
        return true
    } else {
        e.preventDefault(); 
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
        return false;
    }
});