Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can HTML checkboxes be set to readonly?

Tags:

html

checkbox

People also ask

How do I make a checkbox readonly in HTML?

//This will make all read-only check boxes truly read-only $('input[type="checkbox"][readonly]'). on("click. readonly", function(event){event. preventDefault();}).

How do you make a checkbox disabled?

We can make a checkbox disabled in HTML using the disabled attribute. We assign the disabled attribute to an input to disable that input. We can also use the jQuery prop() method to change the disabled attribute of an input to true.

How can create checkbox readonly in MVC?

The CheckBox is made ReadOnly by making it Non-Clickable by adding JavaScript OnClick event handler and returning False.

How do I make checkboxes disabled in CSS?

You can put a transparent div on top of the checkbox to make it un-clickable by toggling a class on the parent object.


you can use this:

<input type="checkbox" onclick="return false;"/>

This works because returning false from the click event stops the chain of execution continuing.


READONLY doesn't work on checkboxes as it prevents you from editing a field's value, but with a checkbox you're actually editing the field's state (on || off)

From faqs.org:

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. 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.

If you don't want to use disabled but still want to submit the value, how about submitting the value as a hidden field and just printing its contents to the user when they don't meet the edit criteria? e.g.

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

This is a checkbox you can't change:

<input type="checkbox" disabled="disabled" checked="checked">

Just add disabled="disabled" as an attribute.


Edit to address the comments:

If you want the data to be posted back, than a simple solutions is to apply the same name to a hidden input:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

This way, when the checkbox is set to 'disabled', it only serves the purpose of a visual representation of the data, instead of actually being 'linked' to the data. In the post back, the value of the hidden input is being sent when the checkbox is disabled.


<input type="checkbox" onclick="this.checked=!this.checked;">

But you absolutely MUST validate the data on the server to ensure it hasn't been changed.


another "simple solution":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled="disabled" / disabled=true