ユーザが特定のフィールドに準拠するアクションを選択するまで、特定のテキストフィールドを隠す方法

Question

私はRailsの学習に時間を費やしていましたが、今私はデモプロジェクトに取り組んでいます。ケアリクエスト_フォームを即座にケアする必要があるかどうかを選択することです。ユーザが「false」を選択した場合、ユーザは、start_timeとstart_dateを渡す次の2つの隠しコード行から日時を選択するよう求められます。ユーザーが「true」を選択した場合、ユーザーがリクエスト_formの送信ボタンをクリックすると、Time.nowを使用してstart_timeフィールドとstart_dateフィールドの現在の時刻と現在の日付を取得します。私の質問は、ユーザーが「false」を選択するまで、最後の2つのフィールドを隠しておく適切な方法は何ですか？ requests_form.html.erb

<div class="row"> 
    <div class="form-group"> 
    <%= f.check_box :immediate_care,{:checked => "checked"} %> Patient needs immediate care. 
    </div 
</div> 

<div class="row"> 
    <div class="form-group"> 
     <label>Choose your start date.</label> 
     <%= f.text_field :start_day, placeholder: "MM/DD/YY", class: "form control" %> 
     </div> 
</div> 

<div class="row"> 
    <div class="form-group"> 
     <label>Choose your start time.</label> 
     <%= f.text_field :start_time, placeholder: "08:00 AM", class: " form-control" %> 
     </div> 
</div>  

Answer 1

これは非常に簡単な解決策です。基本的な考え方は、オプションで表示される入力フィールドを1つのdiv内にラップすることです。あなたはそれぞれのdivを表示したり隠したりするCSSクラスをいくつか定義しました。 javascript関数をselectイベントのclickイベントにバインドすると、select：optionの値に応じてCSSクラスをオプションのdivに追加して削除します。

HTML：

<select id='my_select'>Do you want Immediate Care? 
    <option value='yes'>Yes</option> 
    <option value='no'>No</option> 
</select> 

<div class='reveal' id='date_fields'> 
    ... in here you put the fields you want to hide and show ... 
</div> 

Javascriptを：

$document.ready(function() { 
    $('#my_select').bind('click', function() { 
    selected_option = $('#my_select option:selected'); 
    if $(selected_option).val() == 'yes' { 
     $('#date_fields').addClass('reveal'); 
     $('#date_fields').removeClass('hide'); 
    } else { 
     $('#date_fields').addClass('hide'); 
     $('#date_fields').removeClass('reveal'); 
    } 
    }); 
}); 

そして最後に、CSS：

.reveal { 
    display: block; 
} 

.hide { 
    display: none; 
} 

私は率直な場所で、私の構文が無効であるかもしれないことを認めます。 Railsの開発者として私はCoffeescriptとSASSを使用することを選んだので、JavascriptとSASSの構文スキルは過去5年間で少し萎縮しています。問題を指摘したり修正プログラムを編集したりしてください。

これにはいくつかの注意点があります。 divsはデフォルトでdisplay：blockになっているので、表示するように変更する単一のCSSクラスを使うことができます：noneそしてclickハンドラにそのクラスを単純に追加して削除させます。私は私の例をより明示的にして、ロジックに従う方が簡単です。

また、誤ってクリックを拘束している可能性があります。この例でも、私が取るべき問題に対する一般的なアプローチを示しています。

Answer 2

は、オプションのフィールドラッパーのクラスを追加します。

<div class="row optional"> 

は、このスクリプトを追加します。

<script> 
    $('#patient_immediate_care').change(function() { 
     if($(this).is(":checked")) { 
     $('.optional').hide(); 
     } 
     else { 
     $('.optional').show(); 
     } 
    } 

); 
    $(function() { 
     if($('#name_immediate_care').is(":checked")) { 
     $('.optional').hide(); 
     } 
     else { 
     $('.optional').show(); 
     } 
    }); 
</script> 

とCSS：ヨールフォーム要素の

<style> 
    .optional { 
     display: none; 
    } 
</style> 

チェックidを。それはform_forに依存します。患者は例えばです。