HTMLのinput要素にdisabled属性をtrueにセットすると、ユーザが値を編集できなくなるだけでなく、値そのものが使用できなくなります。つまり、submitなどのアクションでも値がサーバに送信されなくなります。

編集させたくないだけが要件の場合には、readonly属性を使用すればいいのですが、tabなどでカーソル移動する際に選択できてしまいます。できれば、カーソル移動の対象からも外したかったのでいくつか、対応方法考えました。

disabledの設定例

対応方法①送信したい値をcookieやsessionやhidden項目に退避しておく

こちらは、disabled属性がセットされたinput項目の値をcookie、session、hidden項目などにセットしてなんとかして、サーバに送信する方法です。しかし、この方法はdisabled属性がtrueの項目が決まっている場合に使える方法で、動的にdisabled属性がセットされる要素が変わる場合には使用できない方法です。

対応方法②代わりにreadonly属性を使用する

readonly属性を使用して、cssを用いてdisabledになっているように見せる方法です。こちらもおすすめですが、これだけのためにcssを書くのが嫌だったので、使用しませんでした。

対応方法③送信直前にdisabled属性をfalseに設定する

値を送信する直前にdisabled属性を解除してしまう方法で、私はこの方法を採用しました。他のモジュールへの影響が一番少なかったからです。（笑）
方法は至ってシンプルで、値を送信するボタンのonclickイベントにdisabled属性を解除する関数をセットしただけです。

今回はユーザがタブ移動で大量の項目を入力する画面で、カーソル移動の対象にしたくなかったのでdisabled属性を使用しました。そんな要件なけれが、readonly属性で十分です(^∇^)

Tweet