Question

这是我感兴趣的按钮类型：

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

目前我在Rails中的表单看起来像这样

<%= 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：

<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="&#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>

像这样<%= f.radio_button :status, "attending", :onclick => "this.form.submit();", :class => "btn btn-primary" %>在最后粘贴btn类，产生看起来像标准的Rails单选按钮。

反过来生成Bootstrap按钮，单击它们时不会改变任何内容

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

更新1 看起来在Taryn的解决方案中，原来的Rails单选按钮刚刚隐藏在新的Bootstrap按钮下面，只需点击Bootstrap按钮上的任何位置就不会产生控制器动作。

这是她的代码生成的HTML：

<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="&#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>

更新2

尝试像这样的submit按钮

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

仍然会产生重叠和两个单独的按钮，一个来自Bootstrap，另一个来自Rails。只需单击Rails的灰色区域即可触发控制器操作。

Answer 1

你需要erb和html的组合才能让它看起来像bootstrap。

我还没有对此进行过测试，但是这样的事情可能适用于您的按钮：

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

您可能需要稍微调整一下 - 我只是将您提供的两个片段组合在一起。

使用单选按钮将Rails form_for设置为Bootstrap

1 个答案: