Question

我有一个基本的复选框点击功能，只允许用户在每个字段集中只点击一个复选框（有四个字段集，每个字段集包含多个复选框：

$(document).ready(function(){

$('input[type=checkbox]').click(function(){

    // get the fieldset class
    var fieldset = $(this).parents('fieldset').attr('class');

    // set the number of checked
    var numChecked = $('.'+fieldset+' input:checked').size();

    // if more than 1
    if(numChecked > 1){
        alert('Please select only one option per breakout session.')

$（本）.attr（ '检查'，假）; }

});

然后我在表单上有一个提交功能，确认在发布表单之前至少选中了一个复选框：

$('form[name=mainForm]').submit(function(){

    var error = '';

    // loop through each fieldset
    $('fieldset',this).each(function(){

        // set the number of checked for this fieldset
        var numChecked = $('input:checked',this).size();

        // if none are checked
        if(!numChecked){
            // set the error var
            error = 'At least one of your time sessions has no checkbox selected!';
            // add class to show user
            $(this).addClass('errorSessions');
        }
        else{
            $(this).removeClass('errorSessions');
        }

    });

    // if any errors, show them and don't allow the form to be submitted
    if(error.length){
        alert(error);
        return false;
    }

   $("#mainForm").validate();

表格完美验证，第一次完美无瑕。问题是，如果您提交表单，则会进行验证，并且会出现错误“至少有一个时间会话没有选中复选框！” - 此时，如果您继续选择最初未检查的给定字段集中的多个复选框，它将忽略复选框单击功能，并允许您在字段集中选择多个复选框。

有人可以帮忙吗？

Answer 1

好的，我明白了。该错误与脚本将类“errorsessions”添加到字段集有关，该字段集更改了字段集的唯一类名。通过向每个字段集添加唯一ID，然后将脚本更改为引用.attr（'id'）;而不是.attr（'class'）;问题已解决，并且在添加课程后，点击警报功能已恢复。

Answer 2

您是否考虑使用单选按钮进行单选？这样您就不必检查多选，因为在给定组中不能选择多个单选按钮。

JQuery验证和复选框单击功能

2 个答案: