將單選按鈕更改爲實際按鈕 - 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

回答

相關問題