将单选按钮更改为实际按钮 - Ruby on Rails Simple Form Gem答案

【问题标题】：Change radio buttons to actual buttons - Ruby on Rails Simple Form Gem将单选按钮更改为实际按钮 - Ruby on Rails Simple Form Gem
【发布时间】：2017-06-21 12:50:33
【问题描述】：

我已经多次尝试这样做，但无法理解如何使用 Simple Form gem 制作的自动包装器来做到这一点。

使用 Ruby on Rails（加上 Simple Form Gem）我正在尝试使单选按钮的标准输出如下所示：

鲁比：

 <%= n.input :domiciled, as: :radio_buttons, label: "Do you confirm your business is domicled in the United Kingdom?", checked: true %>

HTML 输出：

 <div class="form-group radio_buttons optional user_nurse_domiciled">
     <label class="control-label radio_buttons optional">Do you confirm your business is domicled in the United Kingdom?
     </label>
          <input type="hidden" name="user[nurse_attributes][domiciled]" value="">
               <span class="radio">
                  <label for="user_nurse_attributes_domiciled_true">
                     <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_true">Yes
                  </label>
               </span>
               <span class="radio">
                    <label for="user_nurse_attributes_domiciled_false">
                        <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][domiciled]" id="user_nurse_attributes_domiciled_false">No
                     </label>
                 </span>
   </div>

看起来像这样，当然仍然保持真/假值：

我已经尝试了各种我找到的 CSS 解决方案，但我无法使用 Simple Form。非常感谢任何帮助。

编辑：

为了根据评论问题进行澄清，我也在使用 Bootstrap。

【问题讨论】：

看不懂这个[![Standard simple form radio buttons][1]][1]是什么意思
应该是一张图片，但它没有显示...现在编辑它
图片现在显示，抱歉。
您应该制作自己的自定义包装器See Here 或自定义输入See Here，然后您将替换为： :radio_buttons 您自己的自定义标识符。可能需要一点js和一个隐藏字段来存储点击按钮的值。
作为补充说明，您使用的是 ui 框架吗？有点像引导程序，但我认为最好实际指定

标签： html ruby-on-rails ruby simple-form

【解决方案1】：

您可以隐藏真正的单选按钮，并将您的自定义按钮设置为其标签。然后自定义按钮的样式可以相对于单选按钮是否被选中。

这是一个使用Rails Simple Form gem 的另一个函数生成字段的示例：

f.collection_radio_buttons : domiciled, [[true, 'Yes'] ,[false, 'No']], :first, :last

input[type="radio"] {
  display:none;
}

label {
  border: 1px solid #DDD;
  border-radius:5px;
  padding:10px;
  margin-top:10px;
  display:block;
  position:relative;
}

label:hover {
  cursor:pointer;
  background-color:#EEE;
}

input[type="radio"]:checked + label {
  background-color:#DDD;
}

<input id="user_options_true" name="user[options]" type="radio" value="true" />
<label class="collection_radio_buttons" for="user_options_true">Yes</label>
<input id="user_options_false" name="user[options]" type="radio" value="false" />
<label class="collection_radio_buttons" for="user_options_false">No</label>

【讨论】：