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

Question

使用支持 HTML5 的较新浏览器时（例如 FireFox 4）；

并且表单字段具有属性 required='required' ；

并且表单字段为空/空白；

并点击提交按钮；

浏览器检测到“必填”字段为空，不提交表单；

相反，浏览器会显示一个提示，要求用户在字段中输入文本。

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

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

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

---

更新

HTML 5 multiple 属性 在这里有用吗？有没有人用它来做类似于我的问题的事情？

更新

HTML5 规范 似乎 不支持此功能： ISSUE-111: What does input.@required mean for @type = checkbox?

（问题状态： 问题已被标记为已关闭，不影响。 ） 这里是解释。

更新 2

这是一个老问题，但想澄清这个问题的初衷是能够在不使用 Javascript 的情况下完成上述操作 - 即使用 HTML5 方式来完成。回想起来，我应该让“没有 Javascript”更明显。

原文由 Zabba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，HTML5 没有提供开箱即用的方法来做到这一点。

但是，使用 jQuery，您可以轻松控制复选框组是否具有至少一个选中元素。

考虑以下 DOM 片段：

 <div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

你可以使用这个表达式：

 $('div.checkbox-group.required :checkbox:checked').length > 0

如果至少检查了一个元素，则返回 true 。基于此，您可以实施验证检查。

原文由 Luca Fagioli 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个简单的技巧。这是 jQuery 代码，可以通过更改 required 属性（如果选中任何一个）来利用 html5 验证。以下是您的 html 代码（确保您为组中的所有元素添加了 required。）

 <input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

以下是 jQuery 脚本，如果选择了任何一个，它会禁用进一步的验证检查。选择使用名称元素。

 $cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

这里的小陷阱：由于您使用的是 html5 验证，请确保在验证之前执行此操作，即在表单提交之前。

 // but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});

原文由 thegauraw 发布，翻译遵循 CC BY-SA 3.0 许可协议