2

Rails 4 のフォームでは、チェックボックスを使用する代わりに、Bootstrap のラジオ ボタンを使用してバイナリ値を設定したいと考えています。

Bootstrap の例を参照として使用しています。

私はそれを次のようにしたい：

ブートストラップ ラジオ ボタン

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> True
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> False
  </label>
</div>

http://jsfiddle.net/52VtD/3456/

しかし、これは私がこれまでに持っているものです(HAMLを使用):

Railsブートストラップのラジオボタン

.btn-group{"data-toggle" => "buttons"}
  %label.btn.btn-default
    = f.radio_button :single_use, true
    True
  %label.btn.btn-default
    = f.radio_button :single_use, false
    False

生成するもの:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_true">
      <input id="something_single_use_true" name="something[single_use]" type="radio" value="true"> 
    </label>
    Single use
  </label>
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_false">
      <input checked="checked" id="something_single_use_false" name="something[single_use]" type="radio" value="false">
    </label>
    Unlimited use
  </label>
</div>

rails-bootstrap-formsも使用しています。

更新: Chrome の DevTools で遊んでdisplay: none;、行にスタイルを追加すると、ボタンを希望どおりに表示することができます (ラジオ ボタンを除く)。

<label class="radio" for="something_single_use_true">
...
<label class="radio" for="something_single_use_false">

しかし、HAML でそれを行う方法と、Rails で Form Helper を使用する方法がわかりません。これらの特定の行が生成されていると信じているからです。

4

3 に答える 3

6

私のアプリで非常によく似たことを行う方法を理解するのにしばらく時間がかかりました。そのため、上記よりも簡単なので、回答を投稿すると思いました。Bootstrap には、JavaScript コンポーネントのラジオ ボタンのように機能するボタン グループがあります。そのため、実際に JavaScript を記述する必要はありません。そのボタン グループのドキュメントはこちらです。

これは、ユーザーがさまざまな距離を選択できるようにするボタングループに対してこれを達成するための私の html.erb (申し訳ありませんが、haml ではありません) です。

<%= form_for(@location) do |f| %>
  <div class="field form-group">
    <%= f.label :distance %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :distance, class: "btn btn-primary active" do %>
        <%= f.radio_button :distance, 0.3, checked: true %>
        0.3 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 0.5 %>
        0.5 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 1 %>
        1 mile
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= f.submit "Find my escape bus!", class: "btn btn-success" %>
  </div>
<% end %>

あなたのコードはさらにシンプルになるはずです (フィールド フォーム グループ スニペットに、デフォルト値 true を設定する方法を示すボーナスが追加されているだけです)。

  <div class="field form-group">
    <%= f.label :single_use %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :single_use, class: "btn btn-primary active" do %>
        <%= f.radio_button :single_use, true, checked: true %>
        True
      <% end %>
      <%= f.label :single_use, class: "btn btn-primary" do %>
        <%= f.radio_button :single_use, false %>
        False
      <% end %>
    </div>
  </div>

申し訳ありませんが、スクリーンショットを表示するのに十分なリポジトリ ポイントがまだありません。

于 2015-09-01T20:31:15.723 に答える
0

親ラベルを削除してクリックされたボタンを表示するなど、ポストスタイリングにjQueryを使用しました。

# app/assets/javascripts/something.js.coffee
$ ->
  single_use = $("#something_single_use_true")
  unlimited_use = $("#something_single_use_false")

  # Hide the radio buttons from the buttons.
  single_use.parent().css("display", "none")
  unlimited_use.parent().css("display", "none")

  # Show the button as clicked if the radio button is checked.
  if single_use.is ':checked'
    single_use.parent().parent().addClass("active")
  else if unlimited_use.is ':checked'
    unlimited_use.parent().parent().addClass("active")

于 2014-03-11T15:11:51.317 に答える
0

Rails 4 では、 APIに従って、任意の html パラメーターをボタン宣言の最後に追加できるようになりました。

= f.radio_button :single_use, true, { class: 'btn btn-primary' }, display: 'none'

動作するはずです。とにかく隠しているので、JavaScript 操作に使用する予定がない限り、css クラス宣言を取り除きたいと思うかもしれません。

于 2014-03-11T15:13:42.767 に答える