Submitting disabled checkbox?

Get Started
1

I am toying around with a settings form for a CMS interface and ran into this quandary.

There are settings which are dependent on settings in other forms in the CMS controls , and as such may OR MAY NOT not be altered in the current form. My first instinct is to have my PHP script add DISABLED to the input in the case I want to prevent the user from changing its state ( that is if the input is checked it remains checked if it’s not then it cannot be checked)

The problem stems from the fact that DISABLING an input prevents its value from being sent when the form is submitted AND that an unchecked checkbox does not send its value either. In other words there is actually no way of differentiating a CHECKED DISABLED checkbox from merely an UNCHECKED checkbox. ( is there? I mean there is no READONLY equivalent for checkboxes?)

So far what I was doing was to have the PHP script output a hidden input with a the same name and value as the disabled checkbox. This might have seemed as a an OK workaround, but it makes me nervous when I add AJAX to my form. That is if the information on the form is changed so that the checkbox has to be enabled… (via .js)… I also have to remove the hidden input… OK… minor inconvenience… but if it’s changed again and the checkbox acquires a different value and goes back to being disabled… I need to append the form with a new hidden input.

My fear is that all this writing and unwriting screws something up, DOM wise or otherwise somewhere down the stream. It seems like a read only state for a checkbox would be such an obvious part of that input type’s behaviour, one that would solve this issue so gracefully that I have wondered if I have missed something here.

As always, your input ( pun) is appreciated.

2

I don’t think I know enough about this sort of thing to help much, but you can check if the box is checked or not in PHP, so if you don’t mind the unchecked box still showing, I don’t think that’s a problem.

Something like

$check = $_POST["checkme"];

if (isset($check)) {
	$check = "Yes please!";
} else {
	$check = "No thanks";
};
3

Actually, the goal is for it to appear checked on the form, so the user can be aware that he has chosen that option in some previous dialog… but that he cannot change it at this time. ( the problem is that that same form SOMETIMES allows the user to check or uncheck that input… this ‘sometimes’ is determined via AJAX checking the other values in the form.

so what I am saying is <input type=‘checkbox’ name=‘myName’ id=‘myName’ CHECKED DISABELED value=‘1’> visually accomplices what I need, but doesn’t pass the value of ‘myName’ when the form is submitted. Because an unchecked checkbox input doesnt pass its value either, an DISABLED checkbox registers pretty much the same as an UNCHECKED upon submission, but i need to be able to differentiate between the two ( or at least have the value of “myName” passed/aletered as necessary w/o allowing the user to interact with it the situation calls of it)

4

Hi Ray,

Just wrap a span (with position:relative) around the input and position a transparent element on top of it so it can’t be clicked (for ie8+ use :after etc.). (To stop keyboard tabbing you would need to add tabindex:-1)

5

You can check whether it’s been selected or not, though, which is kind of the same thing.

6

Thanks guys… good tips as always… I think Paul’s suggestion approaches what I was trying to do. I never considered a purely aesthetic solution… but maybe that’s what this problem was; after all I was trying to grayout / block user interaction with the checkbox, but still send the data upon submission.

I figure since I am utilizing js anyway, i can always toggle a class on the wrapping span to turn the ‘spaceball’ effect on the checkbox.

I would have figured HTML would have been able to accomplish this naively. thanks again!