【Rails5】フォームを読取専用にする方法

【Rails5】フォームを読取専用にする方法

背景

編集ページにて、ユーザーが自身のデータを編集して更新する際、「翌日以降のデータについては編集不可」という仕様にしたい。

現在は上記の操作が行われた場合、「翌日以降のデータは編集出来ません」というflashメッセージを表示させ、更新せずにユーザーのトップページへリダイレクトさせている。

だが、そもそもフォームに入力出来ないよう読取専用にする、という方を教えて頂き、その方がユーザー側にとって親切だなと感じたのでそのやり方をメモ。

手順

やり方はhtml内に

:readonly => true

を追加するだけ。

例
<%= ff.time_field :sample_hour, :readonly => true %>

今回は「sample.dayという日付を持っている翌日以降のデータ」にのみ読取専用にしたいので、if文を組み合わせると以下のようになる。

<td class="table-body height">
  <% if sample.day > Date.current %>
    <%= ff.time_field :sample_hour, :readonly => true, class: 'readonly' %>
  <% else %>
    <%= ff.time_field :sample_hour %>
  <% end %>
</td>

これで翌日以降のフォームは読み取り専用になるので入力不可になります。

あとはその部分にclass: 'readonly'を指定し、CSSで色を変えれば見た目にもわかりやすいです。

CSS
.readonly {
  background-color: #EEEEEE;
}
#EEEEEEはごく薄いグレー色

参考

[テキストボックスのテキストを全選択or編集不可にする] (http://d.hatena.ne.jp/apo-co/touch/20091105/p1)

https://javascript.programmer-reference.com/js-readonly/

https://confrage.jp/readonly-readonly-readonly-true/

[カラーコード一覧表] (http://www.netyasun.com/home/color.html)