In some case, we want to display the read-only checkbox in our web form. So, the information cannot be changed. Sure, disabled control will do this but disabled controls change its appearance to grayed-out. We don't want it. There is the easiest way to do that with simple JavaScript. There may be another better way, but I normally use this. We can apply it for other controls as well. What you need to do is just add "onclick='return false;'" in control.

<input type="checkbox" id="chk_normal" value="normal" />

<label for="chk_normal">Normal</label><br/>

<input type="checkbox" id="chk_disabled" value="disabled" disabled="true" />

<label for="chk_disabled">Disabled</label><br/>

<input type="checkbox" id="chk_readonly" onclick="return false;" 
value="read-only" />

<label for="chk_readonly">Read-Only</label><br/>

<input type="checkbox" id="chk_readonly_checked" onclick="return false;" 
value="read-only-checked" checked="true" />

<label for="chk_readonly_checked">Read-Only Checked</label>

author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

blog comments powered by Disqus