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

Question

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

我正在使用jQuery Validify插件及其附加方法文件来使用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/