Question

我有这个标记：

<form action="http://acumbamail.com/signup/13565/" method="POST">
    <input type="checkbox" id="privacidad-btn" > Acepto política de privacidad<br>
    <input type="button" value="Enviar" id="submit_acumba">
</form>

我希望如果用户单击button而未选中复选框，则会发出警告，表示他必须同意这些条款（请查看checkbox）。有关最佳方法的任何想法吗？

我开始这样做，但不知道该怎样走：

if (jQuery("#privacidad-btn").is(":checked")) {

}

Answer 1

我喜欢html5的一种方法是表单验证

只需将required放在复选框上，当尝试提交时，他们会收到一个弹出式对话框，用自己的语言提醒（它是一个好的荧光笔，以它的错误形式）

<input required type="checkbox" id="privacidad-btn">

你可以通过按钮点击事件$("#submit_acumba").click(...)以tymeJV建议的方式来实现这样你就会支持更多的浏览器。但是：它只会在点击按钮时验证

但也有表单提交事件。

$("form").submit(function(e) {
    if ( ! jQuery("#privacidad-btn").is(":checked")) {
        // Not checked abort the default submit
        e.preventDefault();
    }
});

不同之处在于它必须在之前进行所有原生表单验证 - ＆gt;如果它无效，它将不会触发提交或调用函数
使用button.onclick它将避免本机验证，因为它将在提交事件之前运行

Answer 2

您还需要按钮的处理程序：

$("#submit_acumba").click(function(e) {
    e.preventDefault();
    if (jQuery("#privacidad-btn").is(":checked")) {
        //submit!
    }  
})

Answer 3

使用这个直接简单的HTML实现，您可以在没有任何特殊脚本（JavaScript / jQuery）的情况下执行此操作：

<form>
<p><input type="checkbox" required name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>

这是一个JSFiddle链接，您可以在其中使用此实现：http://jsfiddle.net/zs9b167b/

检查复选框是否已选中然后发送

3 个答案: