चेक बॉक्स (रेल, ट्विटर बूटस्ट्रैप, Simple_form) के स्थान पर टॉगल बटन का उपयोग कर

Question

मैं Simple_form, चहचहाना बूटस्ट्रैप का उपयोग कर रहा है, और रेल 3.2.2

किसी को भी अगर वहाँ "टॉगल बटन का उपयोग करने के लिए एक तरीका है पता है "एक सरल_फॉर्म में बूलियन फ़ील्ड पर बूटस्ट्रैप के लिए विकल्प? मैं चेकबॉक्स को बटन के साथ बदलना चाहता हूं।

यहाँ है कि मैं क्या रूप में अब तक की कोशिश की है है (रेल):

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

कैसे करने के लिए एक बटन टैग लगाने पर कोई भी विचार:

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

यहाँ HTML आउटपुट है simple_form इनपुट?

Answer 1

मैं एक जे एस आधारित दृष्टिकोण के साथ आ गए हैं ... मुझे यकीन है कि यह ऐसा करने का सबसे अच्छा तरीका नहीं है, लेकिन यह काम करता है ...

आपके विचार फ़ाइल में पंक्तियों के साथ कुछ जोड़ना इस की:

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

फिर अपने जे एस फ़ाइल में, इस जोड़ें:

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