Related
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
I would like to show a radio button, have its value submitted, but depending on the circumstances, have it not editable. Disabled doesn't work, because it doesn't submit the value (or does it?), and it grays out the radio button. Read-only is really what I'm looking for, but for some mysterious reason it doesn't work.
Is there some weird trick I need to pull to get read-only to work as expected? Should I just do it in JavaScript instead?
Incidentally, does anyone know why read-only doesn't work in radio buttons, while it does work in other input tags? Is this one of those incomprehensible omissions in the HTML specs?
Radio buttons would only need to be read-only if there are other options. If you don't have any other options, a checked radio button cannot be unchecked. If you have other options, you can prevent the user from changing the value merely by disabling the other options:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
Fiddle: http://jsfiddle.net/qqVGu/
I've faked readonly on a radio button by disabling only the un-checked radio buttons. It keeps the user from selecting a different value, and the checked value will always post on submit.
Using jQuery to make readonly:
$(':radio:not(:checked)').attr('disabled', true);
This approach also worked for making a select list readonly, except that you'll need to disable each un-selected option.
This is the trick you can go with.
<input type="radio" name="name" onclick="this.checked = false;" />
I have a lengthy form (250+ fields) that posts to a db. It is an online employment application. When an admin goes to look at an application that has been filed, the form is populated with data from the db. Input texts and textareas are replaced with the text they submitted but the radios and checkboxes are useful to keep as form elements. Disabling them makes them harder to read. Setting the .checked property to false onclick won't work because they may have been checked by the user filling out the app. Anyhow...
onclick="return false;"
works like a charm for 'disabling' radios and checkboxes ipso facto.
The best solution is to set the checked or unchecked state (either from client or server) and to not let the user change it after wards (i.e make it readonly) do the following:
<input type="radio" name="name" onclick="javascript: return false;" />
I've come up with a javascript-heavy way to achieve a readonly state for check boxes and radio buttons. It is tested against current versions of Firefox, Opera, Safari, Google Chrome, as well as current and previous versions of IE (down to IE7).
Why not simply use the disabled property you ask? When printing the page, disabled input elements come out in a gray color. The customer for which this was implemented wanted all elements to come out the same color.
I'm not sure if I'm allowed to post the source code here, as I developed this while working for a company, but I can surely share the concepts.
With onmousedown events, you can read the selection state before the click action changes it. So you store this information and then restore these states with an onclick event.
<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>
<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>
The javascript portion of this would then work like this (again only the concepts):
var selectionStore = new Object(); // keep the currently selected items' ids in a store
function storeSelectedRadiosForThisGroup(elementName) {
// get all the elements for this group
var radioOrSelectGroup = document.getElementsByName(elementName);
// iterate over the group to find the selected values and store the selected ids in the selectionStore
// ((radioOrSelectGroup[i].checked == true) tells you that)
// remember checkbox groups can have multiple checked items, so you you might need an array for the ids
...
}
function setSelectedStateForEachElementOfThisGroup(elementName) {
// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
...
// make sure you return false here
return false;
}
You can now enable/disable the radio buttons/checkboxes by changing the onclick and onmousedown properties of the input elements.
For the non-selected radio buttons, flag them as disabled. This prevents them from responding to user input and clearing out the checked radio button. For example:
<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
JavaScript way - this worked for me.
<script>
$(document).ready(function() {
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>
Reason:
$('#YourTableId').find('*') -> this returns all the tags.
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
iterates over all objects captured in this and disable input tags.
Analysis (Debugging):
form:radiobutton is internally considered as an "input" tag.
Like in the above function(), if you try printing document.write(this.tagName);
Wherever, in tags it finds radio buttons, it returns an input tag.
So, above code line can be more optimized for radio button tags, by replacing * with input:
$('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });
A fairly simple option would be to create a javascript function called on the form's "onsubmit" event to enable the radiobutton back so that it's value is posted with the rest of the form.
It does not seem to be an omission on HTML specs, but a design choice (a logical one, IMHO), a radiobutton can't be readonly as a button can't be, if you don't want to use it, then disable it.
I found that use onclick='this.checked = false;' worked to a certain extent. A radio button that was clicked would not be selected. However, if there was a radio button that was already selected (e.g., a default value), that radio button would become unselected.
<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>
For this scenario, leaving the default value alone and disabling the other radio button(s) preserves the already selected radio button and prevents it from being unselected.
<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>
This solution is not the most elegant way of preventing the default value from being changed, but it will work whether or not javascript is enabled.
Try the attribute disabled, but I think the you won't get the value of the radio buttons.
Or set images instead like:
<img src="itischecked.gif" alt="[x]" />radio button option
Best Regards.
I'm using a JS plugin that styles checkbox/radio input elements and used the following jQuery to establish a 'readonly state' where the underlying value is still posted but the input element appears inaccessible to the user, which is I believe the intended reason we would use a readonly input attribute...
if ($(node).prop('readonly')) {
$(node).parent('div').addClass('disabled'); // just styling, appears greyed out
$(node).on('click', function (e) {
e.preventDefault();
});
}
Here is my solution (override) for Sencha ExtJS 7.2+ (checkbox and radio in a single override)
Ext.define('MyApp.override.field.Checkbox', {
override: 'Ext.field.Checkbox',
/**
* OVERRIDE: to allow updateReadOnly to work propperly
* #param {boolean} newValue
*
* To ensure the disabled state stays active if the field is still readOnly
* we re - set the disabled state
*/
updateDisabled(newValue) {
this.callParent(arguments);
if (!newValue && this.getReadOnly()) {
this.inputElement.dom.disabled = true;
}
},
/**
* OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
* https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
*
* #param {boolean} newValue
*
* - use disabled on the field
*/
updateReadOnly(value) {
this.callParent(arguments);
if (!this.getDisabled()) {
this.inputElement.dom.disabled = value;
}
}
});
Disabled works on individual radio buttons (not the whole set).
If you are using PHP and your circumstances are known on the server before loading the page in the browser you can use this very simple solution.
<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>
I use it on the page responding a form submission.
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, 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="radio"]:not(:checked)').prop('disabled',true);
// and, on the selected ones, mimic readonly appearance
$('#' + idElement + ' input[type="radio"]:checked').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="radio"]:not(:checked)').prop('disabled',false);
// Remove readonly appearance on selected ones
$('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
}
What about capturing an "On_click()" event in JS and checking it like here?:
http://www.dynamicdrive.com/forums/showthread.php?t=33043
I'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?
EDIT: Yeah, I suppose I should have been more specific. I tried doing
<input type="radio" />
and stuff, but:
it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
it won't let me deselect a button after it's pressed!
EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.
Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:
<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>
Works fine for me. Demo
Edit:
1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.
2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.
If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:
<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">
<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">
Note that the name attribute is the same for the group of options, which means that the selections will replace each other.
Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.
You can try this:
HTML
<div>
<ul>
<li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
</ul>
</div>
DEMO
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.
I would like to show a radio button, have its value submitted, but depending on the circumstances, have it not editable. Disabled doesn't work, because it doesn't submit the value (or does it?), and it grays out the radio button. Read-only is really what I'm looking for, but for some mysterious reason it doesn't work.
Is there some weird trick I need to pull to get read-only to work as expected? Should I just do it in JavaScript instead?
Incidentally, does anyone know why read-only doesn't work in radio buttons, while it does work in other input tags? Is this one of those incomprehensible omissions in the HTML specs?
Radio buttons would only need to be read-only if there are other options. If you don't have any other options, a checked radio button cannot be unchecked. If you have other options, you can prevent the user from changing the value merely by disabling the other options:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
Fiddle: http://jsfiddle.net/qqVGu/
I've faked readonly on a radio button by disabling only the un-checked radio buttons. It keeps the user from selecting a different value, and the checked value will always post on submit.
Using jQuery to make readonly:
$(':radio:not(:checked)').attr('disabled', true);
This approach also worked for making a select list readonly, except that you'll need to disable each un-selected option.
This is the trick you can go with.
<input type="radio" name="name" onclick="this.checked = false;" />
I have a lengthy form (250+ fields) that posts to a db. It is an online employment application. When an admin goes to look at an application that has been filed, the form is populated with data from the db. Input texts and textareas are replaced with the text they submitted but the radios and checkboxes are useful to keep as form elements. Disabling them makes them harder to read. Setting the .checked property to false onclick won't work because they may have been checked by the user filling out the app. Anyhow...
onclick="return false;"
works like a charm for 'disabling' radios and checkboxes ipso facto.
The best solution is to set the checked or unchecked state (either from client or server) and to not let the user change it after wards (i.e make it readonly) do the following:
<input type="radio" name="name" onclick="javascript: return false;" />
I've come up with a javascript-heavy way to achieve a readonly state for check boxes and radio buttons. It is tested against current versions of Firefox, Opera, Safari, Google Chrome, as well as current and previous versions of IE (down to IE7).
Why not simply use the disabled property you ask? When printing the page, disabled input elements come out in a gray color. The customer for which this was implemented wanted all elements to come out the same color.
I'm not sure if I'm allowed to post the source code here, as I developed this while working for a company, but I can surely share the concepts.
With onmousedown events, you can read the selection state before the click action changes it. So you store this information and then restore these states with an onclick event.
<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>
<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>
The javascript portion of this would then work like this (again only the concepts):
var selectionStore = new Object(); // keep the currently selected items' ids in a store
function storeSelectedRadiosForThisGroup(elementName) {
// get all the elements for this group
var radioOrSelectGroup = document.getElementsByName(elementName);
// iterate over the group to find the selected values and store the selected ids in the selectionStore
// ((radioOrSelectGroup[i].checked == true) tells you that)
// remember checkbox groups can have multiple checked items, so you you might need an array for the ids
...
}
function setSelectedStateForEachElementOfThisGroup(elementName) {
// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
...
// make sure you return false here
return false;
}
You can now enable/disable the radio buttons/checkboxes by changing the onclick and onmousedown properties of the input elements.
For the non-selected radio buttons, flag them as disabled. This prevents them from responding to user input and clearing out the checked radio button. For example:
<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
JavaScript way - this worked for me.
<script>
$(document).ready(function() {
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>
Reason:
$('#YourTableId').find('*') -> this returns all the tags.
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
iterates over all objects captured in this and disable input tags.
Analysis (Debugging):
form:radiobutton is internally considered as an "input" tag.
Like in the above function(), if you try printing document.write(this.tagName);
Wherever, in tags it finds radio buttons, it returns an input tag.
So, above code line can be more optimized for radio button tags, by replacing * with input:
$('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });
A fairly simple option would be to create a javascript function called on the form's "onsubmit" event to enable the radiobutton back so that it's value is posted with the rest of the form.
It does not seem to be an omission on HTML specs, but a design choice (a logical one, IMHO), a radiobutton can't be readonly as a button can't be, if you don't want to use it, then disable it.
I found that use onclick='this.checked = false;' worked to a certain extent. A radio button that was clicked would not be selected. However, if there was a radio button that was already selected (e.g., a default value), that radio button would become unselected.
<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>
For this scenario, leaving the default value alone and disabling the other radio button(s) preserves the already selected radio button and prevents it from being unselected.
<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>
This solution is not the most elegant way of preventing the default value from being changed, but it will work whether or not javascript is enabled.
Try the attribute disabled, but I think the you won't get the value of the radio buttons.
Or set images instead like:
<img src="itischecked.gif" alt="[x]" />radio button option
Best Regards.
I'm using a JS plugin that styles checkbox/radio input elements and used the following jQuery to establish a 'readonly state' where the underlying value is still posted but the input element appears inaccessible to the user, which is I believe the intended reason we would use a readonly input attribute...
if ($(node).prop('readonly')) {
$(node).parent('div').addClass('disabled'); // just styling, appears greyed out
$(node).on('click', function (e) {
e.preventDefault();
});
}
Here is my solution (override) for Sencha ExtJS 7.2+ (checkbox and radio in a single override)
Ext.define('MyApp.override.field.Checkbox', {
override: 'Ext.field.Checkbox',
/**
* OVERRIDE: to allow updateReadOnly to work propperly
* #param {boolean} newValue
*
* To ensure the disabled state stays active if the field is still readOnly
* we re - set the disabled state
*/
updateDisabled(newValue) {
this.callParent(arguments);
if (!newValue && this.getReadOnly()) {
this.inputElement.dom.disabled = true;
}
},
/**
* OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
* https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
*
* #param {boolean} newValue
*
* - use disabled on the field
*/
updateReadOnly(value) {
this.callParent(arguments);
if (!this.getDisabled()) {
this.inputElement.dom.disabled = value;
}
}
});
Disabled works on individual radio buttons (not the whole set).
If you are using PHP and your circumstances are known on the server before loading the page in the browser you can use this very simple solution.
<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>
I use it on the page responding a form submission.
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, 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="radio"]:not(:checked)').prop('disabled',true);
// and, on the selected ones, mimic readonly appearance
$('#' + idElement + ' input[type="radio"]:checked').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="radio"]:not(:checked)').prop('disabled',false);
// Remove readonly appearance on selected ones
$('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
}
What about capturing an "On_click()" event in JS and checking it like here?:
http://www.dynamicdrive.com/forums/showthread.php?t=33043
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.
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
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;
}
}
}
<input type="checkbox" readonly="readonly" name="..." />
with jquery:
$(':checkbox[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.
I would use the readonly attribute
<input type="checkbox" readonly>
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;
}
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:
<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />
For an unchecked checkbox:
<input type="checkbox" disabled="disabled" />
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:
<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>
I used this to achieve the results:
<input type=checkbox onclick="return false;" onkeydown="return false;" />
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.
I happened to notice the solution given below. In found it my research for the same issue.
I don't who had posted it but it wasn't made by me. It uses jQuery:
$(document).ready(function() {
$(":checkbox").bind("click", false);
});
This would make the checkboxes read only which would be helpful for showing readonly data to the client.
onclick="javascript: return false;"
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;
}
<table>
<tr>
<th>usual
<th>readonly
<th>disabled
</tr><tr>
<td><input type=checkbox />
<td><input type=checkbox readonly tabindex=-1 />
<td><input type=checkbox disabled />
<td>works
</tr><tr>
<td><input type=checkbox checked />
<td><input type=checkbox readonly checked tabindex=-1 />
<td><input type=checkbox disabled checked />
<td>also works
</tr><tr>
<td><label><input type=checkbox checked /></label>
<td><label><input type=checkbox readonly checked tabindex=-1 /></label>
<td><label><input type=checkbox disabled checked /></label>
<td>broken - don't use label tag
</tr>
</table>
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
<input type="checkbox" onclick="return false" /> will work for you , I am using this
Some of the answers on here seem a bit roundabout, but here's a small hack.
<form id="aform" name="aform" method="POST">
<input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
<input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>
then in jquery you can either choose one of two options:
$(document).ready(function(){
//first option, you don't need the disabled attribute, this will prevent
//the user from changing the checkbox values
$("input[name^='chkBox_1']").click(function(e){
e.preventDefault();
});
//second option, keep the disabled attribute, and disable it upon submit
$("#submitBttn").click(function(){
$("input[name^='chkBox_1']").attr("disabled",false);
$("#aform").submit();
});
});
demo:
http://jsfiddle.net/5WFYt/
Building on the above answers, if using jQuery, this may be an good solution for all inputs:
<script>
$(function () {
$('.readonly input').attr('readonly', 'readonly');
$('.readonly textarea').attr('readonly', 'readonly');
$('.readonly input:checkbox').click(function(){return false;});
$('.readonly input:checkbox').keydown(function () { return false; });
});
</script>
I'm using this with Asp.Net MVC to set some form elements read only. The above works for text and check boxes by setting any parent container as .readonly such as the following scenarios:
<div class="editor-field readonly">
<input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
<input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
I know that "disabled" isn't an acceptable answer, since the op wants it to post. However, you're always going to have to validate values on the server side EVEN if you have the readonly option set. This is because you can't stop a malicious user from posting values using the readonly attribute.
I suggest storing the original value (server side), and setting it to disabled. Then, when they submit the form, ignore any values posted and take the original values that you stored.
It'll look and behave like it's a readonly value. And it handles (ignores) posts from malicious users. You're killing 2 birds with one stone.
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>
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.
readonly does not work with <input type='checkbox'>
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.
I would have commented on ConroyP's answer, but that requires 50 reputation which I don't have. I do have enough reputation to post another answer. Sorry.
The problem with ConroyP's answer is that the checkbox is rendered unchangeable by not even including it on the page. Although Electrons_Ahoy does not stipulate as much, the best answer would be one in which the unchangeable checkbox would look similar, if not the same as, the changeable checkbox, as is the case when the "disabled" attribute is applied. A solution which addresses the two reasons Electrons_Ahoy gives for not wanting to use the "disabled" attribute would not necessarily be invalid because it utilized the "disabled" attribute.
Assume two boolean variables, $checked and $disabled :
if ($checked && $disabled)
echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
$checked ? 'checked="checked" ' : '',
$disabled ? 'disabled="disabled" ' : '', '/>';
The checkbox is displayed as checked if $checked is true. The checkbox is displayed as unchecked if $checked is false. The user can change the state of the checkbox if and only if $disabled is false. The "my_name" parameter is not posted when the checkbox is unchecked, by the user or not. The "my_name=1" parameter is posted when the checkbox is checked, by the user or not. I believe this is what Electrons_Ahoy was looking for.
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.
This works for me on Chrome:
<input type="checkbox" onclick="return false">
Very late to the party but I found an answer for MVC (5)
I disabled the CheckBox and added a HiddenFor BEFORE the checkbox, so when it is posting if finds the Hidden field first and uses that value. This does work.
<div class="form-group">
#Html.LabelFor(model => model.Carrier.Exists, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.HiddenFor(model => model.Carrier.Exists)
#Html.CheckBoxFor(model => model.Carrier.Exists, new { #disabled = "disabled" })
#Html.ValidationMessageFor(model => model.Carrier.Exists)
</div>
</div>
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.
The main reason people would like a read-only check-box and (as well) a read-only radio-group is so that information that cannot be changed can be presented back to the user in the form it was entered.
OK disabled will do this -- unfortunately disabled controls are not keyboard navigable and therefore fall foul of all accessibility legislation. This is the BIGGEST hangup in HTML that I know of.
Contributing very very late...but anyway. On page load, use jquery to disable all checkboxes except the currently selected one. Then set the currently selected one as read only so it has a similar look as the disabled ones. User cannot change the value, and the selected value still submits.
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.