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

Question

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

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

当我测试这个时，所需的部分可以工作，但它并没有使它们 select 所需尺寸中的最小尺寸

这是表格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/

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

at least 3 checkboxes in a group must be checked

jquery

jquery-validate