Ruby on RailsでWebサイト公開！に挑戦中

前回、ローンシミュレーションで途中で金利を変更するようにしました。金利変更せずにシミュレーションする場合もあり、その際も正常に動作させる必要があります。JavaScriptを使って、チェックボックスにチェックを入れた場合に、金利変更部分を入力できるように入力フォームを変更します。

１）INPUTタグのID属性を確認

下記"text_field"メソッドで生成される実際のHTMLを確認します。

<%= f.text_field :year_kinri1 %>
<%= f.text_field :kinri1 %>
　　↓
<input id="loan_year_kinri1" name="loan[year_kinri1]" type="text" />
<input id="loan_kinri1" name="loan[kinri1]" type="text" />

上記のようにid属性は"loan_year_kinri1"、"loan_kinri1"になります。


２）JavaScriptの作成

チェックボックスにチェックを入れると、金利変更年と変更後の金利を入力できるようにします。

下記JavaScriptをapplication.html.erbのhead部に記述します。

<SCRIPT language="JavaScript">
<!--
function input_onof(){
  if (document.getElementById("loan_ck1").checked){
    document.getElementById("loan_year_kinri1").disabled = false;
    document.getElementById("loan_kinri1").disabled = false;
  }
  else{
    document.getElementById("loan_year_kinri1").disabled = true;
    document.getElementById("loan_kinri1").disabled = true;
  }
  if (document.getElementById("loan_ck2").checked){
    document.getElementById("loan_year_kinri2").disabled = false;
    document.getElementById("loan_kinri2").disabled = false;
  }
  else{
    document.getElementById("loan_year_kinri2").disabled = true;
    document.getElementById("loan_kinri2").disabled = true;
  }
}
// -->
</SCRIPT>

３）入力フォームにチェックボックスを追加

金利変更部分にチェックボックスを追加し、金利変更入力部の初期状態を入力不可の状態にします。

<INPUT type="checkbox" id="loan_ck1" onclick="input_onof()" >途中で金利変
更する場合は、チェックを入れてください。

<%= f.label :year_kinri1, "1回目の金利変更年（年）" %>
<%= f.text_field :year_kinri1, disabled: 'true' %>

<%= f.label :kinri1, "1回目の変更後金利（％）" %>
<%= f.text_field :kinri1, disabled: 'true' %>