PDA

View Full Version : How to make a checkbox readonly



skvallabhaneni
Feb 1st, 2010, 06:46 AM
Hi,

I want to make a checkbox in readonly state.

The checkbox is checked based on some value that is coming from a database.

I have used the disabled option for this but I am not able to read the form value when it was disabled.

Can anyone help me in resolving this?

Please find my code below

function onPageLoad(){
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
document.getElementById('DTO').disabled =
(document.getElementById('DTO').checked = true) ? true : false;
<% } %>
}

I am writing this code in a JSP file so I used scripting tags.

Regards
V. Suresh Kumar

gusblake
Feb 1st, 2010, 01:50 PM
The single = sign in your conditional statement is actually an assignment operator, so it will always evaluate to true.



document.getElementById('DTO').disabled =
(document.getElementById('DTO').checked == true) ? true : false;


You could also use:



document.getElementById('DTO').disabled = document.getElementById('DTO').checked;


or more robust:



document.getElementById('DTO').disabled = !!document.getElementById('DTO').checked;

mrhoo
Feb 1st, 2010, 05:01 PM
You could also make the field read only, which allows the value to be submitted with the rest of the form, and allows the user to tab to and select the value, but not change it.

For some reason the attribute is called 'readOnly', with a capital 'O', and setting it to any value but false will enable it, if the field is not disabled.

Old Pedant
Feb 1st, 2010, 09:17 PM
Or my trick:


<input type="checkbox" onclick="this.checked=true;" ... />

Horrible hack. <grin/> But it works.

skvallabhaneni
Feb 2nd, 2010, 05:49 AM
You could also make the field read only, which allows the value to be submitted with the rest of the form, and allows the user to tab to and select the value, but not change it.

For some reason the attribute is called 'readOnly', with a capital 'O', and setting it to any value but false will enable it, if the field is not disabled.

Hi,

Could you please give me the code how to use readOnly based on my code given in my post.

Thanks

Old Pedant
Feb 2nd, 2010, 06:55 PM
function onPageLoad()
{
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
var dto = document.getElementById('DTO');
dto.readOnly = dto.checked;
<% } %>
}

BUT IT WILL NOT WORK in most browsers!

The readOnly attribute is *NOT* specified in the w3c specification for any fields except <input type="text"> and <input type="password"> and <textarea>.

If it works on checkboxes in a few other browsers, it can lead you into making a mistake because it won't work in a lot of them.

I say, again, a safer way that will always work is this:


<input type="checkbox" name="DTO" value="X"
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
onclick="this.checked=true;"
<% } %>
/>
or similar. Adapt to your actual checkbox(es).

Old Pedant
Feb 2nd, 2010, 07:00 PM
Another way to do this might be:


<% boolean dtoDisable = "X".equalsIgnoreCase(tierDTO);
if ( dtoDisable ) {
<input type="hidden" name="DTO" value="X" />
<% } %>
<input type="checkbox" name="DTO" value="X" disabled="<%=dtoDisable.toString()%>" />

Been a while since I wrote JSP code, but I think that works.

skvallabhaneni
Feb 3rd, 2010, 08:42 AM
Hi,
I had a method for onClick which needs to be executed in another scenario. How I can achieve both?

Please find my code below:

function onPageLoad(){
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
document.getElementById('DTO').disabled =
(document.getElementById('DTO').checked = true) ? true : false;
<% } %>
}

<input name="ZZEXTDTO" id="ZZEXTDTO" type="checkbox" value="X" CHECKED onclick="javascript:toggleDTONotes()">

So please suggest me how I can acheive the both with onclick i.e., "javascript:toggleDTONotes()" and onclick="this.checked=true;"

Thanks




function onPageLoad()
{
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
var dto = document.getElementById('DTO');
dto.readOnly = dto.checked;
<% } %>
}

BUT IT WILL NOT WORK in most browsers!

The readOnly attribute is *NOT* specified in the w3c specification for any fields except <input type="text"> and <input type="password"> and <textarea>.

If it works on checkboxes in a few other browsers, it can lead you into making a mistake because it won't work in a lot of them.

I say, again, a safer way that will always work is this:


<input type="checkbox" name="DTO" value="X"
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
onclick="this.checked=true;"
<% } %>
/>
or similar. Adapt to your actual checkbox(es).

Old Pedant
Feb 3rd, 2010, 08:06 PM
??? I thought the checkbox was supposed to be read-only? That is, the user is not supposed to be *ABLE* to toggle it?

If so:


<input name="ZZEXTDTO" type="checkbox" value="X"
<% if ("X".equalsIgnoreCase(tierDTO)) { %>
CHECKED onclick="this.checked=true;"
<% } else { %>
onclick="toggleDTONotes()"
<% } %>
/>

No?

randomuser773
Feb 4th, 2010, 12:31 AM
The checkbox is checked based on some value that is coming from a database.Why not copy its value into a hidden field and read that? Then it's O.K. for the checkbox to be disabled.

Old Pedant
Feb 4th, 2010, 12:51 AM
LOL! Ummm...Sir Random, take a look at post #7.

Great minds run in the same gutter?

b.turner
Sep 2nd, 2010, 06:13 PM
You guys are missing the most straightforward option...

HTML
<input type=checkbox checked onchange='keepoldvalue(this);' >

JavaScript:
function keepoldvalue(ob) {
ob.checked=!ob.checked
}

You can use the 'keepoldvalue(this)' onchange event on any checkbox you want to be read-only

Maybe not perfect, but it is clean and simple

DaveyErwin
Sep 2nd, 2010, 06:22 PM
You guys are missing the most straightforward option...

HTML
<input type=checkbox checked onchange='keepoldvalue(this);' >

JavaScript:
function keepoldvalue(ob) {
ob.checked=!ob.checked
}

You can use the 'keepoldvalue(this)' onchange event on any checkbox you want to be read-only

Maybe not perfect, but it is clean and simple

The most straightforward solution is don't use input elements
for the display of output . Use a jpg that you get from a screen
shot of an input element.