Sử dụng nút Chuyển đổi ở vị trí của hộp Check (Rails, Twitter Bootstrap, Simple_form)

Question

Tôi đang sử dụng Simple_form, twitter bootstrap, và đường ray 3.2.2

Có ai biết nếu có một cách để sử dụng nút "Toggle "tùy chọn cho bootstrap trên các trường boolean trong một simple_form? Tôi muốn thay thế các hộp kiểm bằng các nút.

Dưới đây là những gì tôi đã cố gắng cho đến nay trong các hình thức (đường ray):

<%= f.input :client_approved, :input_html => { :class => 'btn btn-primary', :data => {:toggle => 'button'} } %> 

Đây là kết quả HTML:

<input class="boolean optional btn btn-primary" data-toggle="button" id="id_card_design_client_approved" name="id_card_design[client_approved]" type="checkbox" value="1"> 

Bất kỳ ý tưởng về cách gán một thẻ nút để đầu vào simple_form?

Answer 1

Tôi đã đưa ra một cách tiếp cận dựa JS ... Tôi chắc chắn rằng nó không phải là cách đẹp nhất để làm việc đó, nhưng nó hoạt động ...

Trong file view của bạn, thêm một cái gì đó dọc theo dòng điều này:

<div id="client_approved_buttons" class="btn-group" data-toggle="buttons-radio"> 
    <%= f.input : client_approved, as: :hidden %> 
    <a class="btn" data-value="1">Yes</a> 
    <a class="btn" data-value="0">No</a> 
</div> 

Sau đó, trong tập tin JS của bạn, thêm này:

// make button toggles update hidden field 
$('.btn-group a').on('click', function(event){ 
    event.preventDefault(); 
    var input = $(this).siblings('.control-group').find('input[type=hidden]'); 
    if(input.length>0){ 
    if(input.val().toString() !== $(this).data('value').toString()){ 
     input.val($(this).data('value')).trigger('change'); 
    } 
    } 
});