Question

您好我已经插入了一些jquery以验证某个表单上的复选框，我在我的jsFIddle上做了一个简单的示例但是如果未单击该复选框，表单仍会提交，但是警告仍然显示。

如果未勾选复选框，如何停止提交？我的代码位于下方或查看我的jsFIddle

$(document).ready(function () {

var check;

$("#test-with-prop").on("click", function () {
    if ($("input[id=test]").is(":checked")) {
        check = $("#mycheckbox").prop("checked");
        if (!check) {
            alert("Please confirm that you have read and understood the charging agreement between yourself, and .");
        } 
    }
});
});

Answer 1

您应该按照here所述使用$ .on（'submit'）。

例如：

$(document).ready(function () {
    var $form = $('#form-id');
    var $checkbox = $('#mycheckbox');

    $form.on('submit', function(e) {
        if(!$checkbox.is(':checked')) {
            alert('Please confirm!');
            e.preventDefault();
        }
    });
});

这是working example。

Answer 2

仅添加e.preventDefault();并取消提交：

 // Example 3 - With jQuery prop  
    $("#test-with-prop").on("click", function (e) {
        if ($("input[id=test]").is(":checked")) {
            check = $("#mycheckbox").prop("checked");
            if (!check) {
                alert("Please confirm");
                e.preventDefault(); // add this line
            } 
        }
    });

Answer 3

$('#test-with-prop').click(function () {
            if ($('#mycheckbox').is(":checked")) {
                return true;
            }
            else {
                alert("Checkbox is not selected");
                return false;
            }
        });

Answer 4

你可以试试这个。并使用输入类型为按钮而不是类型=“提交”....

$("#test-with-prop").on("click", function () {
        if ($("input[id=test]").is(":checked")) {
            check = $("#mycheckbox").prop("checked");
            if (!check) {
                alert("Please confirm that you have read and understood the charging agreement between ");
            } else{
                $("#form").submit();
            }
        }
    });

在勾选复选框之前，jquery不提交表单

4 个答案: