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

Question

我已经多次尝试这样做，但就是想不通如何使用 Simple Form gem 制作的自动包装器来做到这一点。

使用 Ruby on Rails(加上 Simple Form Gem)我试图制作如下所示的单选按钮的标准输出:

ruby :

 <%= 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>

看起来像这样，当然仍然保持 true/false 值:

我已经尝试了各种我发现的 CSS 解决方案，但没有一个是我可以使用 Simple Form 的。非常感谢任何帮助。

编辑:

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

Answer 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>