必须选中组中至少 3 个复选框

Question

我正在使用 jquery 验证来验证用于构建自定义评估的表单。表格上有多个部分，其中之一是个性。个性部分由 10 个不同的维度组成。如果用户选择使用个性部分，他们可以选择使用该部分中的全部或部分维度。他们至少必须选择至少 3 个维度。

我正在使用 jQuery Validate 插件及其附加方法文件来使用require_from_group 验证方法

当我对此进行测试时，所需的部分可以工作，但并没有让他们选择所需尺寸中的至少 3 个

这里是html格式

<div class="col-xs-12 col-md-6">
    <input type="checkbox" name="Sections" value="Personality" id="Personality" onClick="displayPersonality(this.form)" /> <label for="Personality">Personality -- cost varies by number of dimensions chosen</label>
    <div id="persDimensions" class="radio-group" style="display:none">
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Energy" onclick="CountDims(this.form)" id="Energy" class="pick-three" /> <label for="Energy">Energy</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Flexibility" onclick="CountDims(this.form)" id="Flexibility" class="pick-three" /> <label for="Flexibility">Flexibility</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Organization" onclick="CountDims(this.form)" id="Organization" class="pick-three" /> <label for="Organization">Organization</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Communication" onclick="CountDims(this.form)" id="Communication" class="pick-three" /> <label for="Communication">Communication</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Development" onclick="CountDims(this.form)" id="Development" class="pick-three" /> <label for="Development">Emotional Development</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Assertiveness" onclick="CountDims(this.form)" id="Assertiveness" class="pick-three" /> <label for="Assertiveness">Assertiveness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Competitiveness" onclick="CountDims(this.form)" id="Competitieness" class="pick-three" /> <label for="Competitieness">Competitieness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Toughness" onclick="CountDims(this.form)" id="Toughness" class="pick-three" /> <label for="Toughness">Mental Toughness</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Questioning" onclick="CountDims(this.form)" id="Questioning" class="pick-three" /> <label for="Questioning">Questioning/Probing</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Motivation" onclick="CountDims(this.form)" id="Motivation" class="pick-three" /> <label for="Motivation">Motivation</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="PersonalityDimension" value="Distortion" onclick="CountDims(this.form)" id="Distortion" class="pick-three" /> <label for="Distortion">Distortion</label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="checkbox" name="Equivocation" value="1" id="Equivocation" /> <label for="Equivocation">Equivocation</label></div>
        </div>
    </div>
</div>

这是我的验证码

$("#form").validate({
    rules: {
        PersonalityDimension:{
            require_from_group: function(element){
                if($('#Personality').is(':checked')){
                    return [3,".pick-three"] ;
                }
            }
        } 
    }
});

任何想法为什么不需要选中 3 个复选框？

Answer 1

通常您会在一组单选或复选框元素上使用相同的name 属性，就像您所做的那样。但是，require_from_group 方法正在寻找具有不同名称的元素，并且该规则将应用三个唯一的时间。您将在三个完全不同的输入元素上使用它，而不是在同一组中的三个复选框。

这是一个有争议的问题，因为require_from_group 不是针对您的情况创建的。解决方案是简单地使用minlength 规则来规定最少数量的复选框。

<form id="myform">
    <div>
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
    </div>
    ....
</form>

JavaScript：

$('#myform').validate({
    rules: {
        foo: {  // name of my checkbox group
            required: true,  // at least one checkbox with this alone
            minlength: 3  // at least how many must be checked?
        }
    },
    messages: {
        foo: {
            minlength: "check at least {0}" // {0} automatically inserts parameter value
        }
    }
});

演示：jsfiddle.net/gmvck6oe/1/