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