将单选按钮更改为实际按钮 - Ruby on Rails简单窗体Gem

我已经做了多次尝试，但仅仅是无法让我的脑袋围绕如何使用简单窗体创建的自动包装进行操作。将单选按钮更改为实际按钮 - Ruby on Rails简单窗体Gem

使用Ruby on Rails的（加上简单的表单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>

看起来像这样和st生病当然保持真/假值：

我已经试过各种CSS的解决方案，我发现，但没有什么我可以用简单的表格，工作。任何帮助非常感谢感谢。

编辑：

为了澄清按照意见的问题，我还使用引导。

来源

2017-06-21 DanRio

不能明白你这个'[[标准形式简单的意思！单选按钮] [1]] [1]' – Pavan

应该是一个图像，但它不显示...现在编辑 – DanRio

图像现在显示，道歉。 – DanRio

您可以隐藏真实的单选按钮，并将您的自定义按钮设置为其标签。然后可以对自定义按钮进行相对设置，以检查单选按钮或不选中。

下面是一个例子使用Rails Simple Form宝石的另一个功能生成的字段：

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>

来源

2017-06-21 13:23:34 Shrolox

将单选按钮更改为实际按钮 - Ruby on Rails简单窗体Gem

回答

相关问题