10

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?

WestieUK
  • 214
  • 1
  • 2
  • 8
  • How exactly do you make it read-only? Because the `readonly` attribute doesn't, or at least shouldn't, apply to checkboxes (http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT, http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#checkbox-state). – mercator Feb 09 '11 at 16:37
  • I think this solution also helps here: https://stackoverflow.com/questions/12769664/how-to-make-html-select-element-look-like-disabled-but-pass-values – Sergej Fomin Oct 05 '17 at 12:49

4 Answers4

11

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.

Josiah Ruddell
  • 29,697
  • 8
  • 65
  • 67
1

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.

Wige
  • 3,788
  • 8
  • 37
  • 58
1

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.

toby
  • 885
  • 3
  • 10
  • 21
-1

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

Aaron Hathaway
  • 4,280
  • 2
  • 19
  • 17
  • 1
    *READONLY doesn't work on checkboxes* ~ http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly – Michael Bray Jul 22 '13 at 23:41