style a Rails form_for with radio buttons to Bootstrap - ruby-on-rails

Question

This is type of button that interests me:
<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>
And currently my form in Rails looks like this
<%= 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 that the form above produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><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>
Sticking the btn class at the end like this <%= f.radio_button :status, "attending", :onclick => "this.form.submit();", :class => "btn btn-primary" %>, produces what looks like a standard Rails radio button.
Doing it the other way around produces Bootstrap buttons that don't change anything when you click them
<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
It looks like in Taryn's solution the original Rails radio button just got veiled underneath the new Bootstrap button, a click anywhere on the Bootstrap button produces no controller action.
and here's the HTML her code produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><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
trying a submit button like so
<label class="btn btn-primary">
<%= f.submit :status => "attending", :onclick => "this.form.submit();" %>
Attending
</label>
still produces overlap and two separate buttons, one from Bootstrap and one from Rails. Only clicking the Rails' grey area triggers the controller action.

Answer 1

You'll need a combination of erb and html to make it look like bootstrap.
I haven't tested this, but something like this might work for your buttons:
<%= 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 %>
You may need to tweak it a bit - I am just combining the two snippets you gave.