I want to make readonly checkbox. Like this:
<input type="checkbox" onclick="return false;">
I want the checkbox to look like it is disabled or grayed out.
How can I do this?
You need to disable the checkbox also:
<input type="checkbox" onclick="return false;" disabled="disabled">
To post the value, simply make it readonly instead:
<input type="checkbox" onclick="return false;" readonly="readonly">
You can style checkbox label and readonly inputs with CSS, e.g.: input [readonly="readonly"] {} but the browser should make the checkbox should appear greyed out when set to readonly.
Updated:
You are at the the mercy of the browser when styling checkboxes & to style them consistently across all browsers, you have to resort to images e.g.: https://archive.is/TNUH1
If you don't want to do this (and it seems like a longwinded solution), the simplest solution is to disable the checkbox so it appears correctly, and post the value as a hidden input e.g.:
<input type="checkbox" onclick="return false;" disabled="disabled">
<input type="hidden" name="checkboxval" value="111" />
