0

カスタムボタンをレールのシンプルな形でラジオボタンとして使いたいです。しかし、これを行う方法が本当にわかりません。必要なボタンを提供する CSS コードがありますが、単純なフォームが間違っていると思います。javascrip の設定方法がよくわかりません...

誰かが私がこれを正しくする方法を知っていますか?

私の簡単なフォーム：

  <%= simple_form_for(@post, :html => {:class => 'form-inline' }) do |f| %>
    <%= f.input :link, label: false %>
    <div class="button_group">
      <%= f.input :type, as: :hidden %>
      <a class="radio_button" data-value="0">ONE</a>
      <a class="radio_button" data-value="1">TWO</a>
      <a class="radio_button" data-value="2">THREE</a>
    </div>
    <%= button_tag(type: 'submit', class: "submit_button") do %>
      SUBMIT!
    <% end %>
  <% end %>

CSS ボタン:

.radio_button {
    color: white;
    background-color:#828282;
    font-family: 'Fjalla One', serif;
    font-size: 10pt;
    font-weight: 100;
    text-align: center;
    font-style: italic;
    padding:0px 6px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 2px;
    text-decoration:none;
    border: none;
}.radio_button:hover {
    background-color:#0E9EBB;
    color: white;
    text-decoration:none;
}.radio_button:active {
    position:relative;
    background-color:#0E9EBB;
    top:1px;
}
4

1 に答える 1

1

このコメント付きのコードを参照してください。

// select all next .radio_button elements to #post_type hidden input
$('#post_type ~ a.radio_button').

  // execute code block on click
  click( function(){

     // this refers to clicked a element, you will get strings like: 0, 1, 2
     var clickedValue = $(this).data('value');

     // set clicked value in hidden input
     $('#post_type').val(clickedValue);

  } );

アップデート

あなたが持っているsimple_form_for @something場合@somethingとクラスからの場合Something、f.input :some_field入力は id:something_some_fieldで生成されるため、生成されたHTMLを確認して確認できます。

于 2013-07-15T02:40:53.400 に答える