Visually disable a checkbox but allow it to still submit its value

Question

I have a checkbox which is updated from other selections but it is important to show the checked status to the user. However I also want it to be read only in functionality and represented as such in the display.

• It works fine by disabling the checkbox (gives the greyed out box to assist the user visually) however this means upon submitting the value is not saved.

• Conversely, if I set the checkbox to read-only it disables the checkbox but still appears like a normal checkbox.

I kinda want a bit from each, a checkbox that submits it's value but looks like a disabled checkbox and still displays its check status... does anyone have any ideas?

Cavalier

How exactly do you make it read-only? Because the readonly attribute doesn't, or at least shouldn't, apply to checkboxes (w3.org/TR/html4/interact/forms.html#edef-INPUT, whatwg.org/specs/web-apps/current-work/multipage/…). – Fucus

I think this solution also helps here: #12770164 – Maxim

Answer 1

Use a hidden field <input type="hidden" />. Populate the hidden with the same values you would expect from the checkbox. This way the visual element is separate from the data element and you will not have these concerns.

Alltime

Answer 2

As a simple alternative, would it be possible to add a hidden form element containing the value you want to be stored? With this approach you get the functionality of disabling the element, but still have the value being submitted. And, you don't have to worry about any potential browser compatibility issues.

Other than that, on a read only field, I think you would need to use CSS to style the checkbox as a disabled field.

Cassady

Answer 3

You could set hidden input fields when you set the checkbox values, then the checkbox would be for display purposes only and the real values would be submitted through the hidden input fields.

Dilator

Answer 4

As a quick and dirty solution this should work pretty well. Not sure if there are any hidden downsides though. I could imagine it has some accessibility problems (screen-readers etc..)

.fake-disabled-checkbox{
    pointer-events: none;
    opacity: 0.5;
}

Kyongkyoto

Answer 5

Just make it readonly, give it a special class, and then in your CSS you can make it look like it's disabled.

Hydrophobia

READONLY doesn't work on checkboxes ~ #155791 – Thuythuya