Question

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?

Answer 1

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" />