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