简单表单生成器复选框集合自定义 html 输入

Question

使用 simple_form_for，应该如何构建像颜色选择器这样的东西？想象一个页面，用户可以通过选中复选框来选择要使用的多种颜色。我想展示一个带有颜色的小框和旁边的复选框，以便用户可以通过选中复选框来选择颜色。像这样的

<input type="checkbox" name="colors[test]"><div style="background-color: red; width: 20px; height: 20px"></div>
<input type="checkbox" name="colors[test]"><div style="background-color: green; width: 20px; height: 20px""></div>
<input type="checkbox" name="colors[test]"><div style="background-color: blue; width: 20px; height: 20px""></div>

Answer 1

您可以将 html 标签添加到集合中并为每个标签定义类。然后相应地设置它们的样式。我假设你有一个simple_form_for @color 或类似的东西。

<%= f.input :test, :label => 'Choose a Color:', :collection =>{'<div class="red colorbox"></div>'.html_safe => 'red', '<div class="green colorbox"></div>'.html_safe => 'green', '<div class="blue colorbox"></div>'.html_safe => 'blue' }, :as => :check_boxes %>

在您的样式表中：

/* The colorbox will be under a label with collection_check_boxes class.*/
.collection_check_boxes {
  width: 30px;
  height: 20px;
}

.colorbox {
  width: 20px;
  height: 20px;
}

.red {background: red;}
.green {background: green;}
.blue {background: blue;}