17

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?

1
  • 2
    What have you already tried yourself to do this? Please review How do I ask a good question and this Question Checklist. If you are looking for a plugin, then that is off topic for this website. If you are looking for the code or algorithm to do this, that is also off topic - this is not a coding or tutoring service, you are expected to have researched your issue and made attempts to solve it before posting a question. – Jul 24, 2020 at 22:25

4 Answers 4

26

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" />
9
  • color: #aaaaaa; - Yes. I need something like this. But actually this not change appearence anyhow
    – Roman
    May 21, 2012 at 12:25
  • @Roman what browser are you using? The checkbox itself should appear greyed out just by setting the readonly attribute. If you want the label greyed out, set the css. See this:jsfiddle.net/Btvpq May 21, 2012 at 12:32
  • "checkbox itself should appear greyed out just by setting the readonly attribute" - Tried in IE8, FF12.0, Chrome. Only works in Chrome.
    – Roman
    May 21, 2012 at 12:46
  • I'm afraid when it comes to checkboxes you're at the mercy of the broswer to style its appearance - some allow you change it whereas others don't. The only sure cross-browser way is to use images, e.g. ryanfait.com/resources/custom-checkboxes-and-radio-buttons May 21, 2012 at 12:52
  • 1
    @ChristianLong Yes that is a possible solution now (it wasn't 5 years ago). However its important to note css filters aren't supported in older browsers including IE11 Mar 31, 2017 at 19:50
8

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

input[type=checkbox][disabled] {
    filter: invert(25%);
}
1
  • 4
    Yes that is a possible solution now (it wasn't when this was asked 5 years ago). However its important to note that css filters aren't supported in IE11 Mar 31, 2017 at 19:50
6

simply add the 'disabled' attribute on checkbox like this

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

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.

5
  • This will work, but a pure HTML solution is easier and preferable - no requirement for javascript support May 21, 2012 at 12:17
  • @FluffyKitten , js part is functionally identical to OP code, but without inline javascript. May 21, 2012 at 12:18
  • sorry I thought was not necessary add filter in this example :) , answer updated, thank you @Roman May 21, 2012 at 12:28
  • Ok, thank you. It is something near to that appearence that I want, but still doesn't look like really disabled checkbox :) May be another workaround is available?
    – Roman
    May 21, 2012 at 12:42
  • @Roman as I commented above, the readonly checkbox should appear greyed out - what browser are you using that its not working? Or do you mean you want the label greyed out? See my jsfiddle above & tell us what's not working for you May 21, 2012 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.