How to gray out an html checkbox?

Simple, css-only way to gray-out a disabled checkbox.

input[type=checkbox][disabled] {
    filter: invert(25%);
}

input.readonly {
   opacity: .5;
   cursor: default;
   pointer-events: none;
   
}

<input type="checkbox"> <br />
<input type="checkbox" class="readonly">

Add a class readonly to the element you want to grayout: via css you set an opacity and change the style of cursor. pointer-events: none will prevent any click event, so JS is not necessary.

simply add the 'disabled' attribute on checkbox like this

<input type="checkbox" disabled="disabled" />

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