对一组复选框使用HTML5“required”属性？

Question

对一组复选框使用HTML5“required”属性？

使用支持HTML5的新浏览器时（例如FireFox 4）; 
并且表单字段具有该属性required='required'; 
表格字段为空/空白; 
然后点击提交按钮; 
浏览器检测到“required”字段为空并且不提交表单; 
而是浏览器显示一个提示，要求用户在该字段中键入文本。

现在，我有一组复选框，而不是单个文本字段，其中至少有一个复选框应由用户检查/选择。

如何required在此组复选框上使用HTML5 属性？（由于只需要检查其中一个复选框，我不能将该required属性放在每个复选框上）

PS。我正在使用simple_form，如果这很重要的话。

Answer 1

不幸的是，HTML5并没有提供开箱即用的方法。但是，使用jQuery，您可以轻松控制复选框组是否至少包含一个checked元素。考虑以下DOM片段：<div&nbsp;class="checkbox-group&nbsp;required"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="checkbox_name[]"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="checkbox_name[]"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="checkbox_name[]"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="checkbox_name[]"></div>您可以使用此表达式：$('div.checkbox-group.required&nbsp;:checkbox:checked').length&nbsp;>&nbsp;0true如果至少检查一个元素，则返回。基于此，您可以实施验证检查。

Answer 2

我想没有标准的HTML5方法可以做到这一点，但是如果你不介意使用jQuery库，我已经能够使用webshims的“&nbsp;group-required&nbsp;”验证功能实现“复选框组”验证：小组要求的文档说：如果复选框具有“group-required”类，则必须至少检查表单/文档中具有相同名称的复选框之一。这是一个如何使用它的例子：<input&nbsp;name="checkbox-group"&nbsp;type="checkbox"&nbsp;class="group-required"&nbsp;id="checkbox-group-id"&nbsp;/><input&nbsp;name="checkbox-group"&nbsp;type="checkbox"&nbsp;/><input&nbsp;name="checkbox-group"&nbsp;type="checkbox"&nbsp;/><input&nbsp;name="checkbox-group"&nbsp;type="checkbox"&nbsp;/><input&nbsp;name="checkbox-group"&nbsp;type="checkbox"&nbsp;/>我主要使用webshims来填充HTML5功能，但它也有一些像这样的可选扩展。它甚至允许您编写自己的自定义有效性规则。例如，我需要创建一个不基于输入名称的复选框组，所以我为此编写了自己的有效性规则&nbsp;...