ruby-on-rails - 从 twitter-bootstrap radio 数据切换中获取值

Question

我正在尝试从 twitter-bootstrap data-toggle="buttons-radio"提交的值以及来自评论字段的评论，在使用 erb 的 rails 中的 form_for 中获取值。我看过这些帖子，但我不能把这些点联系起来，可能是因为我不懂任何 javascript。

Twitter bootstrap radio buttons not working
Define value in btn-group using twitter-bootstrap
With Twitter Bootstrap toggle radio buttons, what's the clean way to get form input?

<%= form_for @approval, :url => approve_path, :method => :put, :html => { :id => "other_version_form" }  do |f| %>
  <fieldset>
      <p>
      <b>Comments:</b><br>
      <%= f.text_area :comments, :size => "200x3" %>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{@latest}" %>"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
        <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="<%= "#{v}" %>"><%= "#{v}" %></button>
      <% end %>
    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', approvals_path, :class => 'btn' %>
    </div>

  </fieldset>
<% end %>

表格最终看起来像这样:

<form accept-charset="UTF-8" action="/approvals/approve/1394" class="edit_approval" id="other_version_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=" /></div>
  <fieldset>
    <p>
      <b>Comments:</b><br>
      <textarea cols="200" id="approval_comments" name="approval[comments]" rows="3"></textarea>
    </p>

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.13">3.29.13</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.12">3.29.12</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.11">3.29.11</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.10">3.29.10</button>
      <button type="button" class="btn btn-info" name="approval[version]" id="approval_version" value="3.29.9">3.29.9</button>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" name="commit" type="submit" value="Update Approval" />
      <a href="/approvals" class="btn">Cancel</a>
    </div>
  </fieldset>
</form>

但是当我提交表单并检查 Controller 中的参数时，我只得到评论，我也需要传入选定的值:

{"utf8"=>"✓", "_method"=>"put", "authenticity_token"=>"Q0848ftQQk8S2pWiSpkcozcRalk3qw8yZolZKQBx74s=", "approval"=>{"comments"=>"here is the deal"}, "commit"=>"Update Approval", "controller"=>"approvals", "action"=>"approve", "id"=>"1394"}

谢谢。

===Tried http://dan.doezema.com/2012/03/twitter-bootstrap-radio-button-form-inputs/ ===
===ALL GOOD====
<script type="text/javascript">
jQuery(function($) {
    $('div.btn-group[data-toggle-name=*]').each(function(){
        var group   = $(this);
        var form    = group.parents('form').eq(0);
        var name    = group.attr('data-toggle-name');
        var hidden  = $('input[name="' + name + '"]', form);
        $('button', group).each(function(){
            var button = $(this);
            button.live('click', function(){
                hidden.val($(this).val());
            });
            if(button.val() == hidden.val()) {
                button.addClass('active');
            }
        });
    });
});
</script>
    <div class="btn-group" data-toggle-name="version" data-toggle="buttons-radio" >
      <button type="button" value="<%= "#{@latest}" %>" class="btn btn-info" data-toggle="button"><%= "#{@latest}" %></button>
      <% @versions.each do |v| %>
          <button type="button" value="<%= "#{v}" %>" class="btn btn-info" data-toggle="button"><%= "#{v}" %></button>
      <% end %>
    </div>
    <input type="hidden" name="version" value="0" />

Answer 1

尝试使用 <input type="radio"...而不是 <button type="button"...