提交表单之前，请确保已选中复选框？

Question

我设置了一个简单的“使用条款”复选框，希望用户在提交表单之前先进行检查。 我正在使用WordPress插件“ WP-Polls”。

这是我尝试过的：

$('.wp-polls-form').submit(function() {
    if ($('input:checkbox', this).is(':checked')) {
        // everything is fine...
    } else {
        alert('Please agree to the Terms of Use.');
        return false;
    }
});

HTML：

<form id="polls_form_1" class="wp-polls-form" action="/index.php" method="post">
    <p style="display: none;"><input type="hidden" id="poll_1_nonce" name="wp-polls-nonce" value="12a6404147"></p>
    <p style="display: none;"><input type="hidden" name="poll_id" value="1"></p>
    <div id="polls-1-ans">
    <ul>
        <li><input type="radio" id="poll-answer-1" name="poll_1" value="1"></li>
        <li><input type="radio" id="poll-answer-2" name="poll_1" value="2"></li>
        <li><input type="radio" id="poll-answer-3" name="poll_1" value="3"></li>
    </ul>

    <label class="check-terms"><input type="checkbox">I am over 18 and I have read and understand the Terms of Use</label>

    <input type="button" name="vote" value="Vote" class="Buttons" onclick="poll_vote(1);">

编辑1：

将其更新为包含单选按钮：

//Make sure checkbox and radio are checked before submitting
$('.wp-polls-form').submit(function() {
    if ($('input:checkbox', this).is(':checked') &&
        $('input:radio', this).is(':checked')) {
        // everything is fine...
    } else {
        alert('Please agree to the Terms of Use.');
        return false;
    }
});

编辑：2

感谢@AnthonyGarcia。 这些按钮的工作方式与我希望的完全一样，但是唯一的问题是该表单未提交。

对于“提交”按钮，我将按钮的类型从“ button更改为“ submit ，并且摆脱了onclick="poll_vote(1);" 。

<input type="submit" name="vote" value="Vote" class="Buttons" />

$(function() {
    window.poll_vote = function(num) {
        console.log(num);
    }

    $('.wp-polls-form').submit(function(e) {

        if (!$('input:radio', this).is(':checked')) {
            alert('Please pick a beat.');
            return false;
        }

        if (!$('input:checkbox', this).is(':checked')) {
            alert('Please agree to the Terms of Use.');
            return false;
        }

        poll_vote(1);

        return false;
    });
});

可以在此处看到现场站点。 相关部分是顶部的深色投票部分。

编辑：3

这是poll_vote()的函数。 我是从插件中的polls-js.dev.js文件中获得的： https : //github.com/lesterchan/wp-polls

// When User Vote For Poll
function poll_vote(current_poll_id) {
    jQuery(document).ready(function($) {
        if(!is_being_voted) {
            set_is_being_voted(true);
            poll_id = current_poll_id;
            poll_answer_id = '';
            poll_multiple_ans = 0;
            poll_multiple_ans_count = 0;
            if($('#poll_multiple_ans_' + poll_id).length) {
                poll_multiple_ans = parseInt($('#poll_multiple_ans_' + poll_id).val());
            }
            $('#polls_form_' + poll_id + ' input:checkbox, #polls_form_' + poll_id + ' input:radio, #polls_form_' + poll_id + ' option').each(function(i){
                if ($(this).is(':checked') || $(this).is(':selected')) {
                    if(poll_multiple_ans > 0) {
                        poll_answer_id = $(this).val() + ',' + poll_answer_id;
                        poll_multiple_ans_count++;
                    } else {
                        poll_answer_id = parseInt($(this).val());
                    }
                }
            });
            if(poll_multiple_ans > 0) {
                if(poll_multiple_ans_count > 0 && poll_multiple_ans_count <= poll_multiple_ans) {
                    poll_answer_id = poll_answer_id.substring(0, (poll_answer_id.length-1));
                    poll_process();
                } else if(poll_multiple_ans_count == 0) {
                    set_is_being_voted(false);
                    alert(pollsL10n.text_valid);
                } else {
                    set_is_being_voted(false);
                    alert(pollsL10n.text_multiple + ' ' + poll_multiple_ans);
                }
            } else {
                if(poll_answer_id > 0) {
                    poll_process();
                } else {
                    set_is_being_voted(false);
                    alert(pollsL10n.text_valid);
                }
            }
        } else {
            alert(pollsL10n.text_wait);
        }
    });
}

Answer 1

这个怎么样？ 希望能帮助到你。 谢谢

 $('.wp-polls-form').submit(function() {
        var isCheckboxChecked = $("input[type*='checkbox']").filter(":checked");
        if (isCheckboxChecked) {
            // everything is fine...
        } else {
            alert('Please agree to the Terms of Use.');
            return false;
        }
    });

Answer 2

永远不会调用您的代码，因为您没有提交表单。 您必须替换此：

<input type="button" name="vote" value="Vote" class="Buttons" onclick="poll_vote(1);">

通过这样的事情：

<input type="submit" name="vote" value="Vote" class="Buttons">

这是经过修改的代码的小提琴： http : //jsfiddle.net/5st235fn/

Answer 3

我喜欢用简单的按钮替换提交按钮，然后以编程方式提交表单（或使用ajax发布其值）。 但是，您有一个onclick="poll_vote(1);" 我们不知道在做什么，所以这个答案只是一个猜测。

如果有poll_vote并且您确实要调用它，请尝试将其添加到末尾

function poll_vote(param) {
    ... current code ...
    if ($('input:checkbox', '.check-terms').is(':checked')) {
        $('.wp-polls-form').submit();
    } else {
        alert('Please agree to the Terms of Use.');
        return false;
    }
}