Menu
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.
If you need to submit a form when a checkbox is checked or when it is unchecked like when you are using a switch, a good way is to create an hidden input. If you try to submit the checkbox argument if the checkbox is unchecked the form will not be submitted at all.
You can't style a disabled checkbox directly because it's controlled by the browser / OS. However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox".
UPDATE: READONLY doesn't work on checkboxes
You could use disabled="disabled" but at this point checkbox's value will not appear into POST values. One of the strategy is to add an hidden field holding checkbox's value within the same form and read value back from that field
Simply change disabled to readonly
I've solved that problem.
Since readonly="readonly" tag is not working (I've tried different browsers), you have to use disabled="disabled"
instead. But your checkbox's value will not post then...
Here is my solution:
To get "readonly" look and POST checkbox's value in the same time, just add a hidden "input" with the same name and value as your checkbox. You have to keep it next to your checkbox or between the same <form></form> tags:
<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>
<input type="hidden" id="Tests" name="Tests" value="4" />
Also, just to let ya'll know readonly="readonly", readonly="true", readonly="", or just READONLY will NOT solve this! I've spent few hours to figure it out!
This reference is also NOT relevant (may be not yet, or not anymore, I have no idea): http://www.w3schools.com/tags/att_input_readonly.asp
If you're happy using JQuery then remove the disabled attribute when submitting the form:
$("form").submit(function() {
$("input").removeAttr("disabled");
});
create a css class eg:
.disable{
pointer-events: none;
opacity: 0.5;
}
apply this class instead of disabled attribute
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With