PDA

View Full Version : How to make a checkbox readonly



skvallabhaneni
02-01-2010, 07: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
02-01-2010, 02: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
02-01-2010, 06: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
02-01-2010, 10:17 PM
Or my trick:


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

Horrible hack. <grin/> But it works.

skvallabhaneni
02-02-2010, 06: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
02-02-2010, 07: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
02-02-2010, 08: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
02-03-2010, 09: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
02-03-2010, 09: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
02-04-2010, 01: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
02-04-2010, 01:51 AM
LOL! Ummm...Sir Random, take a look at post #7.

Great minds run in the same gutter?

b.turner
09-02-2010, 07: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
09-02-2010, 07: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.