how to display checkboxes on read-only form (ASP.NET)

Question

I have a read-only form filled out automatically from a database. I have several fields with true/false values, and would like them displayed as checkboxes that are either empty or checked. I can databind the checkbox control and disable it, but then it appears grayed out. Is there a simple way to change this so it will show up at a normal, easy-to-read boldness but still be disabled? If not, what's the best way to do this? Should I use an image?

Solution 1

Interesting question!

There's only one issue I can see with using images instead of normal checkboxes, and that's how the active checkboxes will differ from the disabled (image-based) checkboxes. So, if you go the image route, you will probably want to style all checkboxes. :)

You can effectively disable any checkbox with the following jQuery method (I've only tested in Chrome and IE 9, so far).

$('.readonly:checkbox').click(function(e) {
    e.preventDefault();
});

This will "disable" any checkbox with the "readonly" class.

Or, you can use an inline JavaScript function (albiet not recommended, as it adds clutter and confusion):

<input type="checkbox" onclick="event.preventDefault();" />

The reason you would use "preventDefault()" instead of "return false", is because returning false will stop propagation. This means that your click event will not bubble to the parent element. That could potentially cause problems with other code... but it's unlikely.

Also, like Bala R mentioned, you mustn't rely on these restrictions to work. Your server side code should be aware that these values are read only, and refrain from updating them.

Here is jsFiddle example: http://jsfiddle.net/xixionia/3rXCB/

I hope this is helpful! :)

Solution 2

You can go like this as well.

<asp:CheckBox id="checkbox1" Text="Custom" onclick="javascript: return false;" />

Which will render it as

<input type="checkbox"
checked  onclick="javascript: return false;">Custom</input>

Solution 3

You can do something like this with javascript and use it for the checkbox's onclick handler.

jsFiddle link

function makeMeReadonly(checkbox){
    checkbox.checked = !checkbox.checked;
}

and

<asp:CheckBox id="checkbox1" onclick="makeMeReadonly(this)" />

or

<asp:CheckBox id="checkbox1" onclick="this.checked = !this.checked" />

if you want it inline.

but you shouldn't depend on this for security as it will be a regular check box when javascript is not available and/or client code is not that difficult to work around client code restrictions but in your case since you have a readonly view, I wouldn't think you have any logic to save changes.

Solution 4

I just had the same problem and fixed it with an OnClick event on the checkbox. In the event handler the .Checked state is set to the value it is supposed to display.

private void chkBox_CheckStateChanged(object sender, EventArgs e)
    {
        chkBox.Checked = boolDatabasevalue;
        return;
    }

Works great, the user can click on the checkbox but the check mark does not change.

The only issue is a slight border shadow indicating the Focus. But the checkmark is, as OP was looking for, of easy-to-read boldness.

NB: this is C#, but in Asp.Net this should work similarly.

View more solutions