ドロップダウンメニューから選択した値に応じて、レール3のフォームの一部を非表示にする方法

Question

私はレールで自分のビューの1つに部分的な_formを持っています。それはそうのようになります。

<%= form_for(@project) do |f| %> 
    <div class="field"> 
    <%= f.label "Project Status" %><br /> 
    <%= f.select :status, ["In Progress", "Cancelled"] %> 
    </div> 

    <div class="field"> 
    <%= f.label "Capital Cost" %><br /> 
    <%= f.text_field :capital_cost %> 
    </div> 

    <div class="actions"> 
    <%= f.submit %> 
    </div> 

<% end %> 

「進行中」のページをリロードすることなく、ドロップダウンメニューから選択されていない限り、私はグレー表示されるフォームの「資本コスト」の部分をしたいと思います。これは可能ですか？私はjavascriptを使ったいくつかのソリューションを見ましたが、私は完全な初心者であり、彼らの周りに頭を上げることができませんでした（残念ながら、私はこのプロジェクトを終了する前にjsを学ぶ時間がありません）。乾杯！

Answer 1

これはJavaScriptが必要です。 onchangeイベントハンドラを使用して、<select>入力の変更を監視します。入力値を比較し、#project_capital_cost入力のdisabled属性を条件付きで設定/設定解除します。このためにjQueryを使用することができます。

デフォルトでは、Rails 3はgemfileにjquery_railsの宝石を含めることでjQueryを有効にします。必要に応じて修正して、あなたの_form部分的に次のスクリプトを追加し、あなたのアプリとあなたの<select>と<input>タグに含まjquery_railsはそれぞれ#project_statusと#project_capital_cost IDを持っていと仮定：

<script> 
    $(document).ready(function(){ 
    if($('#project_status').val() != "In Progress"){ 
     $("#project_capital_cost").attr('disabled','disabled'); 
    } 
    else{ 
     $("#project_capital_cost").removeAttr('disabled'); 
    } 

    $('#project_status').change(function(){ 
     if($(this).val() != "In Progress"){ 
      $("#project_capital_cost").attr('disabled','disabled'); 
     } 
     else{ 
      $("#project_capital_cost").removeAttr('disabled'); 
     } 
    }) 
    }); 

</script> 

EDIT：

を非表示にするにはdivいくつか与える：

<div class="field" id="my_div"> 
    <%= f.label "Capital Cost" %><br /> 
    <%= f.text_field :capital_cost %> 
    </div> 

は次にスクリプトで$("#my_div").css('display','block')で$("#my_div").css('display','none')

と

$("#project_capital_cost").removeAttr('disabled');で

$("#project_capital_cost").attr('disabled','disabled');を交換してください。