チェックボックスをreadonlyにする

チェックボックスは「見た目上」readonlyにならない

フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります（disabledとは違います、念のため）。

ところがチェックすボックスやラジオボタンにreadonly属性をしていても、見た目上、値のON/OFFができてしまいます。

ただ、フォームのサブミット時に値の送信は行われないため、readonly属性が無効でないわけではありません。

要は見た目と実装に違いがあるだけなので、見た目上readonlyだと思わせる工夫をすればよいのです。

まずは、見た目上、値のON/OFFができないように調整が必要になります。

実装はシンプルで、Javascriptの力を利用します。

<input type="checkbox" name="xxx" reaonly onclick="return false;" />

これにより、クリックをしても値のON/OFFが切り替わることがなくなります。

ところが、フォーカス時のスタイルが設定されていると、値が切り替わらないのにフォーカスしているため、ユーザーの混乱を招きます。

そこで、フォーカス時にはそのフォーカスを外れるように、属性を一つ追加します。

<input type="checkbox" name="xxx" reaonly onclick="return false;" onfocus="this.blur();" />

最後に、カーソルのスタイルを指定して、値の切り替えができないと思わせる装飾を施します。

<input type="checkbox" name="xxx" reaonly onclick="return false;" onfocus="this.blur();" style="cursor:default;" />

これにより、見た目上も編集付加であるとユーザーに思わせることができます。