如何隐藏radio_button并使用div / label作为按钮？ （Ruby on Rails）

Posted 2021-04-14

在simple_form中，我试图设置radio_buttons的样式。

但是如何隐藏radio_buttons并通过单击标签选择table_id？

  <% Table.all.each do |rt| %>
    <div class="btn-group" data-toggle="buttons-radio">
      <%= f.radio_button :table_id, "fd", :id=>"hi-#{rt.id}", :style=>"display:none;" %>
      <label for="hi-#{rt.id}" class="btn btn-primary box3"><%= rt.id %>
      </label>
    </div>
  <% end %>

笔记：

table has_many：预订

预订belongs_to：table

table_id是预留表中的整数列。

Screenshot of the buttons

答案

我找到了答案。

视图：

<% Table.all.each do |rt| %>
  <label class="btn btn-primary box3" for="reservation_table_id_<%=rt.id%>">
    <%= f.radio_button :table_id, rt.id %>
    <span><%= rt.id %></span>
  </label>
<% end %>

样式：

label > input{
  visibility: hidden;
  position: absolute;
}
label > input + span{
  cursor:pointer;
  border:2px solid transparent;
}