How do I make a checkbox unclickable *without* it being greyed out in the browser?

Question

How do you create an HTML checkbox that is unclickable, but not greyed out? I used the disabled=disabled tag, but that makes it greyed out (in Chrome). Otherwise it works well. Working in jQuery and Rails...

Thanks.

Schulte

If you don't grey it out, users will think it can be clicked. – Foundry

I don't even know why you'd want to do this. If you want a control to not be clicked, why have a control there? Unless I'm missing something here. – Albina

Please take note of what BoltClock (and everyone else) says - all you're going to do is make people think your checkbox doesn't work properly. – Odrick

The point is to let the user know a true/false value. – Schulte

Note that disabled checkboxes won't submit! If the checkbox is checked by default and you want to submit the checked value but not allow user to change it -- disabled won't work. – Icebreaker

It's not part of a form. It just to give information to the user. I could two images, one of a checked checkbox and one of an empty checkbox, but this is simpler and cleaner. – Schulte

why not simply have a textual representation of the boolean nature of the thing rather than using a form artifact in a non-form way? – Aciniform

Sometimes you need to show users something easy like a checkbox for a boolean, but its readonly and showing it greyed out just makes it harder to see. – Watts

Answer 1

Usability concerns aside:

$("input:checkbox").click(function() { return false; });

For example: http://jsfiddle.net/nKwRj/

Teutonic

Answer 2

I had the same issue where i wanted the user to check the box but not the client the client was supposed to see the checked box only and not to make changes so

in html just add a css pointer event style

<input name='test' type='checkbox' style="pointer-events: none;"/>

Excurved

Answer 3

Use jQuery.on with false as the callback:

$(":checkbox").on("click", false);

Fiddle

Icebreaker

Answer 4

Prevent checkboxes from being changed by ID or by Class.

/* by class */
$(".nochange").click(function () {
    return false;
});
/* by ID */
$("#nochange").click(function () {
    return false;
});

<input name='test' type='checkbox' class='nochange' checked='checked' />
<br />
<input name='test' type='checkbox' id='nochange' checked='checked' />

http://jsfiddle.net/mjames757/nX64E/1/

Finsteraarhorn

Answer 5

Just add onclick="return false" in your HTML code.

Example:

<input type="checkbox" onclick="return false" class="checkbox" checked > 

Biles

Answer 6

Why do you want to make a unclickable checkbox appear to be clickable? To fool the users?

If you really want to fool the users, you could place a div with 0.01 opacity above it using absolute positioning (no script required). But I still wonder why you feel the need to do this prank on your users... ;)

EDIT: If what you really need is to include a value the user should not change but you don't want what you probably are considering "an ugly disabled checkbox", you should use input type hidden, which is completely invisible.

If you want to indicate that something is preselected but not changeable or something like that, use a disabled checkbox to indicate this (or an image of a pretty checkbox if you like), but beware that the value of a disabled checkbox is not submitted. Use a hidden field to include the the data needed.

Egotist

Practically speaking, this is the solution that many of us are looking for. How to make the checkbox un-changeable (answer: disable it) but still preserve the value of whether it is checked or not upon save (answer: use a hidden input type). Make sure to only add the hidden input if you have also disabled the checkbox. – Personal

Answer 7

I ran into this post in search of an answer to the initial question - and found the opposals to non-grayed disabled checkboxes convincing, so instead i made a td-tag containing this: <%if rs("yes/no value") = -1 then response.write("√")%> (wing is a &radic). Then i get a clean info wing not inviting to click.

Tunesmith