6

Rails のビューの 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 の使用方法を学ぶ時間がありません)。乾杯！

4

2 に答える 2

6

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

デフォルトでjquery_railsは、Rails3はGemfileにgemを含めることでjQueryを有効にします。jquery_railsアプリにインクルードし、<select>タグ<input>にそれぞれID#project_statusとIDがあると仮定して、必要な変更#project_capital_costを加えて次のスクリプトを_formパーシャルに追加します。

<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>

編集：

非表示にするにdivは、いくつかを与えますid。

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

その後、交換してください

$("#project_capital_cost").attr('disabled','disabled');と$("#my_div").css('display','none')

と

$("#project_capital_cost").removeAttr('disabled');$("#my_div").css('display','block')スクリプトで。

于 2013-02-24T18:33:23.723 に答える
3

入力をグレー表示するには、HTML入力タグ属性を無効にして使用します。

<input disabled="disabled">

Railsからどれが

<%= f.text_field :capital_cost, :disabled => "disabled", :id => "capital_cost_input" %>

「進行中」が選択されているときにそれを有効にするには、AJAXとJavascriptが必要ですが、Railsの助けがあります。

初め

<%= f.select :status, ["In Progress", "Cancelled"],
             {},
             "data-remote" => true, "data-url" => ..._path %>

これにより、onchange属性が設定され、AJAX呼び出しが行われます。

AJAX呼び出しを処理するルートを追加し、「data-url」のURLを指定します。

AJAXアクションのビューテンプレートで、入力を有効にするJavascriptを記述します。何かのようなもの

$('#capital_cost_input').removeAttr("disabled")
于 2013-02-24T18:33:12.900 に答える