Can HTML checkboxes be set to readonly?

Question

I thought they could be, but as I'm not putting my money where my mouth was (so to speak) setting the readonly attribute doesn't actually seem to do anything.

I'd rather not use Disabled, since I want the checked check boxes to be submitted with the rest of the form, I just don't want the client to be able to change them under certain circumstances.

PConroy_2287 · Answer

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 ' Check value';
}
else
{
    // Not allowed change - submit value..
    echo '';
    // .. and show user the value being submitted
    echo ' Check value';
}

user_22470 · Answer

This is a checkbox you can't change:

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:

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.

Grant_Wagner_9254 · Answer

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

Jonathan_Holland_1965 · Answer

This presents a bit of a usability issue.

If you want to display a checkbox, but not let it be interacted with, why even a checkbox then?

However, my approach would be to use disabled (The user expects a disabled checkbox to not be editable, instead of using JS to make an enabled one not work), and add a form submit handler using javascript that enables checkboxes right before the form is submitted. This way you you do get your values posted.

ie something like this:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

user_4188092 · Answer

Belated answer, but most answers seem to over complicate it.

As I understand it, the OP was basically wanting:

Readonly checkbox to show status.
Value returned with form.

It should be noted that:

The OP preferred not to use the disabled attribute, because they 'want the checked check boxes to be submitted with the rest of the form'.
Unchecked checkboxes are not submitted with the form, as the quote from the OP in 1. above indicates they knew already. Basically, the value of the checkbox only exists if it is checked.
A disabled checkbox clearly indicates that it cannot be changed, by design, so a user is unlikely to attempt to change it.
The value of a checkbox is not limited to indicating its status, such as yes or false, but can be any text.

Therefore, since the readonly attribute does not work, the best solution, requiring no javascript, is:

A disabled checkbox, with no name or value.
If the checkbox is to be displayed as checked, a hidden field with the name and value as stored on the server.

So for a checked checkbox:

For an unchecked checkbox:

The main problem with disabled inputs, especially checkboxes, is their poor contrast which may be a problem for some with certain visual disabilities. It may be better to indicate a value by plain words, such as Status: none or Status: implemented, but including the hidden input above when the latter is used, such as:

Status: Implemented

user_782013 · Answer

I would use the readonly attribute

Then use CSS to disable interactions:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Note that using the pseudo-class :read-only doesn't work here.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

user_2945815 · Answer

Most of the current answers have one or more of these problems:

Only check for mouse not keyboard.
Check only on page load.
Hook the ever-popular change or submit events which won't always work out if something else has them hooked.
Require a hidden input or other special elements/attributes that you have to undo in order to re-enable the checkbox using javascript.

The following is simple and has none of those problems.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

If the checkbox is readonly, it won't change. If it's not, it will. It does use jquery, but you're probably using that already...

It works.

user_4928642 · Answer

If you want them to be submitted to the server with form but be not interacive for user, you can use pointer-events: none in css (works in all modern browsers except IE10- and Opera 12-) and set tab-index to -1 to prevent changing via keyboard. Also note that you can't use label tag as click on it will change the state anyway.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}


  
    usual
    readonly
    disabled
  

    
    
    
    works
  

    
    
    
    also works
  

    
    
    
    broken - don't use label tag

user_175071 · Answer

No, input checkboxes can't be readonly.

But you can make them readonly with javascript!

Add this code anywhere at any time to make checkboxes readonly work as assumed, by preventing the user from modifying it in any way.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}


 I'm readonly!

You can add this script at any time after jQuery has loaded.

It will work for dynamically added elements.

It works by picking up the click event (that happens before the change event) on any element on the page, it then checks if this element is a readonly checkbox, and if it is, then it blocks the change.

There are so many ifs to make it not affect the performance of the page.

user_6493171 · Answer

readonly does not work with

So, if you need to submit values from disabled checkboxes in a form, you can use jQuery:

$('form').submit(function(e) {
    $('input[type="checkbox"]:disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

This way the disabled attributes are removed from the elements when submitting the form.

user_2175874 · Answer

If you want ALL your checkboxes to be "locked" so user can't change the "checked" state if "readonly" attibute is present, then you can use jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Cool thing about this code is that it allows you to change the "readonly" attribute all over your code without having to rebind every checkbox.

It works for radio buttons as well.

user_1102037 · Answer

This works for me on Chrome:

user_5358054 · Answer

Just use simple disabled tag like this below.

Walden_2673770 · Answer

I just don't want the client to be able to change them under certain circumstances.

READONLY itself won't work. You may be able to do something funky w/CSS but we usually just make them disabled.

WARNING: If they're posted back then the client can change them, period. You can't rely on readonly to prevent a user from changing something. The could always use fiddler or just chane the html w/firebug or some such thing.

user_18183749 · Answer

Extract from https://stackoverflow.com/a/71086058/18183749

If you can't use the 'disabled' attribut (as it erases the value's input at POST), and noticed that html attribut 'readonly' works only on textarea and some input(text, password, search, as far I've seen), and finally, if you don't want to bother with duplicating all your select, checkbox and radio with hidden input logics, you might find the following function or any of his inner logics to your liking :

    addReadOnlyToFormElements = function (idElement) {
        
            // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
            $('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',true); 
     
            // and, on the selected ones, to disable mouse/keyoard events and mimic readOnly appearance
            $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5');
        }

And there's nothing easier than to remove these readonly

removeReadOnlyFromFormElements = function (idElement) {

    // Remove the disabled attribut on non-selected
    $('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',false);

    // Restore mouse/keyboard events and remove readOnly appearance on selected ones
    $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity','');
}

Admin · Answer

When posting an HTML checkbox to the server, it has a string value of 'on' or ''.

Readonly does not stop the user editing the checkbox, and disabled stops the value being posted back.
One way around this is to have a hidden element to store the actual value and the displayed checkbox is a dummy which is disabled. This way the checkbox state is persisted between posts.

Here is a function to do this. It uses a string of 'T' or 'F' and you can change this any way you like. This has been used in an ASP page using server side VB script.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "" & _
    ""   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

At the top of an ASP page you can pickup the persisted value...

strDataValue = GetCheckbox(Request.Form("chkTest"))

and when you want to output your checkbox you can do this...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

I have tested this and it works just fine. It also does not rely upon JavaScript.

user_9950751 · Answer

@(Model.IsEnabled) Use this condition for dynamically check and uncheck and set readonly if check box is already checked.

Adam_Pierce_5324 · Answer

You could always use a small image that looks like a check box.

Mayowa_18593 · Answer

No, but you might be able to use javascript events to achieve something similar

Can HTML checkboxes be set to readonly?

48 Answers