tags:

views:

10470

answers:

14

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.

+10  A: 

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 it's 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 ' Check value: 1';
}
ConroyP
Works, but it's kind of.. well dirty, readonly on checkboxes should simply do what intuition tells.
levhita
Intuition fools us, as ConroyP explained.
ANeves
A: 

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

Mayowa
A: 

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.

WaldenL
You are totally right, that's why i also check that on the server side,setting this is just to improve user experience on the client side.
levhita
+9  A: 

This is a checkbox you can't change:

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

Just add disabled="disabled" as attribute.

powtac
you are the first one to answer the question. all other posters were questioning the authors intention. thats why i gave a lot of negative votes.
usr
+10  A: 

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;
       }
    }
}
FlySwat
+1 for usability!
Martin
Another option is to display the disabled checkbox (or an image or anything to denote checked/unchecked) and have a hidden input that is what is processed by the server.
Juan Mendes
It's not a usability issue when you got a form in which some of your decision affects some other inputs (aka: setting a value that cannot be touched if you don't undo your first action.). I hate when people try to change people's mind instead of answering (this is not about you @FlySwat, you answered).
clinisbut
A: 

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

Adam Pierce
A difficulty with using a picture of a checkbox is that the checkbox itself is drawn by the browser. Some browsers just use the native controls from the OS, but others draw their own stylish controls. So your checkbox picture wouldn't look the same as other checkboxes on the page in some browsers. Of course you could replace all checkboxes on the page with your own style...
Mnebuerquo
+3  A: 
<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.

Grant Wagner
A: 

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 inbetween 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 = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
 "value='" & i_strChecked_TorF & "'>" & _
"<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
 strThisCheckedValue & ">"

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.

A: 
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
A: 

I've got the same problem with one of my projects. Maybe too late to help with yours, but who knows, maybe I could get a necromancer badge.

If you need the checkbox to be submitted with the form but effectively read-only to the user, I recommend setting them to disabled and using javascript to re-enable them when the form is submitted.

This is for two reasons. First and most important, your users benefit from seeing a visible difference between checkboxes they can change and checkboxes which are read-only. Disabled does this.

Second reason is that the disabled state is built into the browser so you need less code to execute when the user clicks on something. This is probably more of a personal preference than anything else. You'll still need some javascript to un-disable these when submitting the form.

It seems easier to me to use some javascript when the form is submitted to un-disable the checkboxes than to use a hidden input to carry the value.

Mnebuerquo
A: 

My solution is actually the opposite of FlySwat's solution, but I'm not sure if it will work for your situation. I have a group of checkboxes, and each has an onClick handler that submits the form (they're used for changing filter settings for a table). I don't want to allow multiple clicks, since subsequent clicks after the first are ignored. So I disable all checkboxes after the first click, and after submitting the form:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

The checkboxes are in a span element with an ID of "filters" - the second part of the code is a jQuery statement that iterates through the checkboxes and disables each one. This way, the checkbox values are still submitted via the form (since the form was submitted before disabling them), and it prevents the user from changing them until the page reloads.

sk
+2  A: 
<input type="checkbox" readonly="readonly" name="..." />

with jquery:

$(':checkbox[readonly=readonly]').click(function(){
            return false;
        });

it still might be a good idea to give some visual hint (css, text,...), that the control won't accept inputs.

Jan Limpens
This didn't work in ie6 for me, the readonly attribute filter doesn't work correctly. I took that out of the filter and put the attribute check in the body of the function and it works fine in ie6.
gt124
+2  A: 

onclick="javascript: return false;"

Sandman