El uso de botones de alternancia en lugar de casillas de verificación (rieles, Twitter Bootstrap, Simple_form)

Question

estoy usando Simple_form, arranque gorjeo, y los carriles 3.2.2

¿Alguien sabe si hay una manera de utilizar el botón "cambiar "opción para bootstrap en campos booleanos en una forma simple? Me gustaría reemplazar las casillas de verificación con botones.

Esto es lo que he probado hasta ahora en la forma (rieles):

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

Aquí está la salida 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"> 

Alguna idea sobre cómo asignar una etiqueta de botón para la entrada simple_form?

Answer 1

Yo he llegado con un enfoque basado en JS ... Estoy seguro de que no es la mejor forma de hacerlo, pero funciona ...

En su archivo de vista, añadir algo a lo largo de las líneas de esta:

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

a continuación, en el archivo JS, añadir lo siguiente:

// 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'); 
    } 
    } 
});