簡單表單構建器複選框集合自定義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;}