Question

我有一个简单的＆＃34;使用条款＆＃34;复选框设置，我希望用户在提交表单之前检查它。我正在使用WordPress插件＆＃34; WP-Polls＆＃34;。

以下是我尝试的内容：

$('.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;
    });
});

可以看到实时网站here。相关部分是最黑暗的投票部分。

编辑：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;
    }
}

确保在提交表单前检查复选框？

编辑1：

编辑：2

编辑：3

3 个答案: