2013/05/23

HTMLのcheckboxをReadOnlyにする方法

<input type="checkbox" onclick="return false;"  ...>
これチェックボックスのReadOnlyの代わりになります。
チェックボックス以外のtextとかはreadonly=""でもreadonly="true"でも付ければOKですが、何故かチェックボックスにはreadonly属性は付けられないようです。(SelectタグもReadonly出来ませんでした。他にもreadonlyにならないのはあるかも。Selectを無理やりReadonlyにする方法。)

readonlyはユーザに見せながら、変更不可能な項目を作りたいときに使います。
hiddenは変更不可能ですが見えないし、disabledは項目が無いのと同じ(FormのSubmitで値が送られない)なので動作が違いますね。
出来ればボックス内を灰色にしたいところですが簡単には出来なさそうです(背景色を灰色にして変更不可能を強調するので誤魔化してます)。
例:

 チェックするときはchecked="true"をつけて


ちなみに「onclick」なのでもしかしたらフォーカスをチェックボックスに当ててスペースキーを押すと値が変更されるのでは、と思われそうですがスペースキーでも変更不可です。onclickはスペースキーのイベントと無関係だと思うのでスペースキーのイベントがonclickを呼んでるんだと思います(予想)。

WebページをJavaScriptでちょっと便利にする、という場面は非常に多いでしょう。
JavaScript: The Good Parts (Douglas Crockford)
この本はオライリーにしてはすごくページが薄く、簡単に読める内容です。でもこんなに役に立ったのを実感した本は少ないです。JavaScriptは適当な書き方でも動いてしまい、最良な書き方、というのが身に付きにくいですがこの本をザッとでも読めばスパっと分かるようになるはずです。
トップページへ

チェックボックスがらみでもう一つ、VBなどで作られた普通のアプリケーションのUIではチェックボックスの横の文字列をクリックしてもチェックされます。しかしHTMLフォームのUIはあまりこうなってません。
文字列もクリック出来た方が便利そうです。spanを被せてonclickにチェックボックスのonclickを呼ぶようにすれば出来そうかなぁ、でも全部にそれやるのはめんどくさそうだなぁとか思ってましたが、実は標準でLabelというタグがあるようです。
<label>
   <input type="checkbox">チェックできる
</label>
とか
<input type="checkbox" id="check01">
<label for="check01">チェックできる</label>  

 
となります。

0 件のコメント:

コメントを投稿