javascript - 如何使用 jquery 使复选框强制即使在浏览器后退按钮单击时也是如此？

Question

我面临如下情况。

1. 带有字段和复选框的网页1(同意条款)
2. WebPage2 检查复选框是否已选中并启动电子邮件

填写第 1 页表单字段后，选中复选框(我同意条款)并提交到第 2 页，第 2 页检测到复选框选中状态并继续发送电子邮件。 - 工作正常

现在的问题是， 如果在 page2 中单击浏览器中的“后退按钮”，则加载第 1 页(复选框显示未选中)，然后如果按下浏览器“前进按钮”而不选中该复选框，则提交 page1 并且 page2 开始发送电子邮件。

即使用户使用浏览器的“后退”和“前进”按钮，我也希望在转到第 2 页之前强制选中该复选框。主要是为了防止网络表单垃圾邮件。

如何实现这一目标？请帮忙。

Answer 1

您可以做的是将 Iagree 值传递到 get 中，这样当他们前进到该页面时，他们会得到类似“/account/register?terms=true”的内容，然后输入带有name terms 将设置为 true。

但是，为要存档的内容设置两个页面可能不是一个好主意，因为它允许人们完成整个后退/前进的操作。

我所做的是创建一个简单的 jsFiddle 和一个应该对你有帮助的解决方案

jsFiddle:https://jsfiddle.net/vq0y78ea/

HTML

<div class="section1">
    <input type="checkbox" class="TsCs" />
    <p>Terms and Conditions</p>
    <button class="agree-to-terms">I agree</button>
</div>
<div style="display:none" class="section2">
    <label>Email address</label>
    <input type="textbox" />
    <button class="register-account">Register</button>
</div>

Javascript/jQuery

$(function () {
    $('.agree-to-terms').on('click', function () {
        if ($('.TsCs').is(':checked')) {
            $('.section1').slideUp();
            $('.section2').slideDown();
        }
    });

    $('.register-account').on('click', function () {
        if ($('.TsCs').is(':checked')) {
            $('form').submuit();
        } 
        else
        {
            alert('There was a problem with the Ts and Cs, please check "I agree"');
            $('.section1').slideDown();
            $('.section2').slideUp();
        }
    });
});

基本上，网页上只有一个表单，当用户选中我同意条款和条件时，它将隐藏我同意部分并显示注册部分。这将阻止用户前后移动，而且如果用户没有选中复选框并尝试提交，我已使用 jQuery 来确保他们已选中它，否则无法提交。

此外，您还可以使用表单发布做什么，通过在发布方法中使用表单值的代码，发布复选框的值，确保它被选中/为真，如果不只是返回页面。