Stil ein Rails form_for mit Radio-Buttons

Question

Bootstrap

Dies ist Art von Taste, die ich interessiert:

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) 
    </label> 
</div> 

Und meine derzeitige Form in Rails sieht aus wie dies

<%= form_for [current_user, rsvp], remote: true do |f| %> 
    <%= f.hidden_field :event_id %> 
    <%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %> 
    <%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%> 
    <%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %> 
<% end %> 

HTML, dass die obige Form produziert :

<form class="edit_rsvp" id="edit_rsvp_10" action="https://stackoverflow.com/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="MIbWTIdE3/6MJ5ly3oWleBRIvit5WA0CeFm/+caKj049svqPVG8h+uf76NVjxr31d69jlbMWNIIB4Eo7a6R9cw==" /> 
    <input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" /> 
    <input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" /> 
    <input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" /> 
    <input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" /> 
</form> 

die BTN Klasse wie diese <%= f.radio_button :status, "attending", :onclick => "this.form.submit();", :class => "btn btn-primary" %> am Ende haftet, erzeugt, was aussieht wie ein Standard-Rails-Radio-Button.

es anders tun produziert rund Bootstrap Tasten, die, wenn man sie nichts ändern

klicken

<label class="btn btn-primary"> 
    <input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" autocomplete="off"> Attending 

    </label> 

UPDATE 1 Es sieht aus wie Lösung in Taryns der ursprünglichen Radiobutton Rails wurde gerade unter verschleiert Wenn Sie auf die Schaltfläche Bootstrap klicken, wird keine neue Controller-Aktion ausgeführt.

und hier ist der HTML ihr Code erzeugt:

<form class="edit_rsvp" id="edit_rsvp_10" action="https://stackoverflow.com/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="qqtfAy+xZmnklDe+IXVGg2sFbhLC5laWQn4jRBb+RT+nn3PA/JqYbY9IRhmcNl4OCOKzrAiobxY7x9aGu9C3Ag==" /> 
    <input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" /> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" /> 
      Attending 
     </label> 
     <label class="btn btn-primary"> 
      <input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" /> 
      Interested 
     </label> 
     <label class="btn btn-primary"> 
      <input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" /> 
      Not Interested 
     </label> 
    </div> 
</form> 

UPDATE 2

eine submit Taste wie der Versuch, so

<label class="btn btn-primary"> 
     <%= f.submit :status => "attending", :onclick => "this.form.submit();" %> 
     Attending 
    </label> 

produziert immer noch überlappen und zwei separate Tasten, eine von Bootstrap und eine von Rails. Wenn Sie nur auf den grauen Bereich der Rails klicken, wird die Controller-Aktion ausgelöst.

Answer 1

Sie erhalten eine Kombination von erb und html brauchen, um es wie Bootstrap aussehen.

ich nicht getestet haben, aber so etwas wie dies könnte für die Tasten funktionieren:

<%= form_for [current_user, rsvp], remote: true do |f| %> 
    <%= f.hidden_field :event_id %> 
    <div class="btn-group" data-toggle="buttons">  
    <label class="btn btn-primary active"><%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %></label> 
    <label class="btn btn-primary active"><%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%></label> 
    <label class="btn btn-primary active"><%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %></label> 
    </div> 
<% end %> 

Möglicherweise müssen Sie es ein bisschen zwicken - Ich bin die Kombination nur die beiden Schnipsel Sie gab.