从 twitter-bootstrap 无线电数据切换中获取值

Question

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

但是当我提交表单并检查来自控制器的参数时，我只得到了 cmets，我也需要选择的值来传递：

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

Answer 2

我的回答是基于https://stackoverflow.com/a/16214643/1111662

在您的视图中（我使用 HAML，但如果需要转换为 ERB）

.btn-group{data:{toggle: "buttons-radio"}}
  %label.btn
    = f.radio_button :gender, "Male"
    Male
  %label.btn
    = f.radio_button :gender, "Female"
    Female

在您的 特定于视图的 javascript 中，例如pages.js.coffee（同样，我使用 CoffeeScript，但如果需要，可以转换为纯 JS JQuery）

$ ->
  $('.btn-group label.btn input[type=radio]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

JS 用于在视图加载时使按钮看起来“被选中”。它首先隐藏单选按钮，然后通过链接的 JQuery 语法将 Twitter Bootstrap 类“活动”添加到现在隐藏但仍选中的单选按钮。伪类:checked 允许找到正确的单选按钮。

对于单个检查按钮

查看 (HAML)

.btn{data:{toggle: "buttons-radio"}}
  = f.check_box :public
  Public

JS (CoffeeScript)

activateRadioButton = ($element) ->
  hiddenField = $element.children('input[type=hidden]')
  toggleInputValue hiddenField

toggleInputValue = ($input) ->
  switch $input.val()
    when "0" then $input.val('1')
    when "1" then $input.val('0') 

$ ->
  $('.btn input[type=checkbox]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

Rails 为复选按钮使用隐藏字段（请参阅RubyOnRails API），因此我们需要添加一个 onclick 处理程序来更改隐藏字段

注意使用 f.submit 而不是 submit_tag 来实现这一点