How To Create Read Only CheckBox In ASP.NET

CheckBox control is standard ASP.NET control, used to take user's input when user should choose between two opposite options like yes/no, checked/unchecked, true/false etc.

Sometimes you need just to show CheckBox current value, and display control as checked or unchecked. For example, if CheckBox is on some report which should be printed, CheckBox's state should be read-only, without option to change it on report just before printing. In this case, if user can change report values and then print report, printed document would contain wrong information.

TextBox control has very useful ReadOnly property. If ReadOnly is set to true, user can't change value of TextBox control. Unfortunately, there is no similar ReadOnly property for CheckBox control.

CheckBox control has Enabled property which could be used to make CheckBox read only. Use Enabled="false" and user can't change CheckBox value. The problem is, when Enabled is false, CheckBox will change its look and become gray. If you background is also gray, disabled CheckBox control almost disappear on form.

Reset CheckBox value by using AutoPostBack = true and CheckedChanged server side event

First way to make CheckBox read-only is to return control's original state back when user tries to change CheckBox value. On this way, after postback, CheckBox control will still have unchanged value. To make this work, set AutoPostBack property to true, and in CheckedChanged event, re-set CheckBox.Checked property to previous state.

Advantage of this method is that you are able to not just keep value of CheckBox unchanged, but also you can inform the user that this form is read only and values in report shouldn't be changed. However, it requires postback to web server, which is not user friendly in every case.

Use JavaScript to create read only CheckBox control

One more way to make CheckBox control read-only is to call JavaScript code on OnClick event. Just add OnClick="return false;" and CheckBox will be read-only. Code implementation could look like this:

<asp:CheckBox runat="server" ID="chkReadOnly" Checked="true" OnClick="return false;" />

This solution is simple, but notice that it will not work if web browser doesn't support JavaScript or user intentionally disabled it due to security reasons.

Using jQuery to make CheckBox ReadOnly

JavaScript solution above is very useful when you have one or two CheckBox controls on page. But, if you have many CheckBoxes it could be tedious task to type same code in each of them. Fortunately, there is jQuery with its selectors which is ideal for problems like this.

Here is an example which makes read-only all check boxes on page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:CheckBox Checked="true" ID="chkReadOnly" runat="server" />

        <script type="text/javascript" >
            // This jQuery code makes all check boxes read-only
            $(':checkbox').click(function(){
                return false;
            });
        </script>

    </div>
    </form>
</body>
</html>

Use two images instead of CheckBox control

Instead of using CheckBox control, you can use two images: Checked.gif or Unchecked.gif, and depending of current value show one of them. These images could look like CheckBox control, so your report will look like there is real CheckBox.

If Checked property is true, show Checked.gif, and if Checked = false, show Unchecked.gif image. And finally you have read-only "checkbox".

Be aware that using of screen shots of checked and unchecked CheckBox could confuse visitors if they try to click on it. As an alternative, you can use any two images that represent checked and unchecked state. On this way you have an opportunity to enhance user interface, design beautiful check symbols and make pages more intuitive.

One more advantage of using images instead of CheckBox control is full cross-browser compatibility. If you use jQuery or plain JavaScript, remember that it will not work in all web browsers, especially on not if visitor browse your website from mobile phone. Also, even if web browser support JavaScript by default, it is possible that user is disabled JavaScript due to security reasons.

In the other hand, simple Checked and Unchecked images are always displayed perfectly.

Displaying of images instead of CheckBox control requires additional code. If we need read-only CheckBox on more than one place, we should consider encapsulation of logic inside of custom ASP.NET control.

Enhanced standard CheckBox control as ReadOnlyCheckBox custom control

To automate things, we will encapsulate "use images instead of CheckBox control" idea in form of custom ASP.NET control. Let's name it ReadOnlyCheckBox control. ReadOnlyCheckBox will inherit standard CheckBox control and have all its features, and few new properties for its read-only behavior.

I created ReadOnlyCheckBox control which inherits standard ASP.NET CheckBox control. It has all the same properties, and only render itself as read-only at run time. You can use Checked/Unchecked images, or display messages like Yes/No, True/False etc. ReadOnlyCheckBox control is free

You can download ReadOnlyCheckBox control and example project from https://beansoftware.com/download/ReadOnlyCheckBox.zip.

Conclusion

HTML CheckBox is created by using <input > tag, so its basic purpose is to gather input from the user. CheckBox has not ReadOnly property, and by default can't be used to just show data. CheckBox is created to be interactive. That opens a question that maybe idea to try to use input control for data presentation is wrong in its essence?

Although it is possible to make CheckBox control read only, I think we could find better answer if we look into relation between ASP.NET TextBox and Label controls.

CheckBox control is made to work with bool variables, like Yes/No, True/False, Checked/Unchecked etc. In the other hand, TextBox and Label controls both work with string data type. TextBox control is designed to accept string input from user, and on the client side is rendered as input tag just like CheckBox. Label control is designed as read-only.

So, for read only strings, we don't try to make TextBox read only by using JavaScript or on some other way. Instead of that, we simply take Label control.

By following the same logic, we need some additional ReadOnlyCheckBox control, which would only display checked/unchecked states. Unfortunately, control like this doesn't exist on Visual Studio Toolbox. But, you can create it! Even better, you can use mine :)

You can download ReadOnlyCheckBox control project and one example project from https://beansoftware.com/download/ReadOnlyCheckBox.zip. The code is free and it looks without bugs for me. But, please note that you use it on your own responsibility.

Happy coding!

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback |