HTML: Why there is no native support to restrict state change in check-box without disabling it?

Question

In HTML, only text controls like text-box, text-area, password-box have read-only property. Why didn't they support check-box/radio-button?

I know I can achieve this feature using script by putting onclick="return false;". (I don't want any workaround, I want to know only the reason for not providing native support to achieve this)

But my question is there any specific reason for not supporting read-only in check-box/ radio button even-though it accepts input from user.

EDIT 1: I found this but it doesn't answer my question - Why there is no native way to restrict the user to change the state without disabling it?

Answer 1

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. For many types of fields, READONLY is irrelevent because you don't normally change the value. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field. DISABLED, however, actually prevents you from using the field.

Notice in these examples that you can set the checkboxes even though they are "read only":

SOURCE

EXAMPLE from faqs.org

Answer 2

HTML 4.01 allows readonly for input in general without restrictions by type. However, it seems that it was generally not implemented in browsers, possibly because the implementors did not see much need for it. In HTML5 CR, readonly is explicitly disallowed for input type=checkbox, and HTML5 CR (or some other “HTML5 spec” such as HTML 5.1 Nightly or WHATWG Living HTML) is generally what implementors use as the guideline these days.

There have been proposals to allow it in HTML5, e.g. a discussion in May 2011 at the whatwg list, as well as browser bug reports (rejected on the basis of what HTML5 says), but apparently without sufficiently good use cases. Although real use cases exist, they are probably too marginal, and reasonable alternatives can be presented, such as the use of a checkbox image (checked or unchecked as desired) with suitable associated text and, if the pseudo-checkbox is set to checked, a hidden field carrying the desired information.

Answer 3

Use jquery to make it disable(readonly) or enable. Only text fields are possible to make them readable at the time of rendering.

<input type="checkbox" id="chk1"/>

then by using Jquery

$(document).ready(function(){
$("#chk1").prop('disabled',true);
});

Answer 4

First, you shouldn't intersect the onclick event of a checkbox for the mere purpose of checking whether it is checked or not. You should use the onchange event instead. Why? Because the onclick event triggers before the onchange event, so if you intersect the onclick event you will not be able to get the actual state of the checkbox unless you do some ugly javascript acrobatics with setTimeout

If you want to make the checkbox "read-only" you have to use the disabled attribute. Like below...

<input type="checkbox" disabled/>

To answer your question, I think it's better explained by the HTML Specs in W3.Org

The difference between disabled and readonly is that read-only controls are still focusable, so the user can still select the text and interact with it, whereas disabled controls are entirely non-interactive. (For this reason, only text controls can be made read-only: it wouldn't make sense for checkboxes or buttons, for instances.)