MW211 EXIT

devlog
HTML/変更できないチェックボックス
2011年10月07日
チェックボックスを表示するものの内容を変更させたくない場合がある。
たとえば、情報を呼び出して承認する画面とかでだ。

こんな場合は、readonly属性を使うらしい。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" readonly="readonly"                  
                                                    name="name" value="true"/>│
└──────────────────────────────────────┘

しかし、これだと画面操作としてチェックをつけたり、はずしたりすることは可能だ。
だが、ユーザインタフェースの観点から、チェックを変更できない方がいいと思う。
そこで、disabled属性をつける。
ただし、これだと値も無効になってしまうようなので、hidden属性も併用する。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" disabled="disabled"/>              │
│<input type="hidden" name="name" value="true"/>                             │
└──────────────────────────────────────┘

ただこれだと、チェックボックスが薄く表示されてしまう。
確かに変更は頑として受け付けない態度が見えるが、
チェックボックス自体が無効っぽい印象を受ける。(意見には個人差があります)
それが嫌な場合以下のようにonclickを無効にする方法がある。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" onclick="return false;"/>          │
│<input type="hidden" name="name" value="true"/>                             │
└──────────────────────────────────────┘
分類:HTML