勾选Checkbox后表单提交按钮无跳转，jQuery代码问题排查

嘿，问题出在你用了e.preventDefault()却没在复选框勾选时触发表单提交！让我给你拆解一下：

核心问题 #

你在按钮的点击事件里第一行就写了e.preventDefault()，这个方法会强制阻止表单的默认提交动作——不管用户有没有勾选条款复选框，表单都不会主动提交，所以页面自然一直停在当前页。当复选框勾选时，你只是修改了表单的action属性，但没有告诉浏览器“现在可以提交表单了”。

修复方案 #

我们只需要调整逻辑：只有当复选框未勾选时，才阻止默认行为并显示错误；如果勾选了，就让表单正常提交（或者手动触发提交）。

方案一：仅在未勾选时阻止默认行为

修改后的jQuery代码如下：

jQuery('#mybtn').click(function (e) {
    if (jQuery('#mytc').is(':checked')) {
        jQuery('#myfrm').attr('action', 'http://test.php');
        jQuery('#checkerror').html('');
        // 勾选时不阻止默认行为，表单会自动提交
    } else {
        e.preventDefault(); // 只有未勾选时才阻止提交
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }
});

方案二：统一阻止默认行为，手动触发提交

如果你想更稳妥地控制提交时机，也可以统一阻止默认行为，在勾选时手动触发表单提交：

jQuery('#mybtn').click(function (e) {
    e.preventDefault(); // 统一阻止默认行为，手动控制提交逻辑
    if (jQuery('#mytc').is(':checked')) {
        jQuery('#myfrm').attr('action', 'http://test.php');
        jQuery('#checkerror').html('');
        jQuery('#myfrm').submit(); // 手动触发表单提交
    } else {
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }
});

效果验证 #

修改后，当用户勾选复选框点击「Proceed to Checkout」按钮时，表单会正常提交到你设置的http://test.php地址；未勾选时则停在当前页，并在红色提示区显示错误信息。

内容的提问来源于stack exchange，提问作者Shawn