How to disable a checkbox?

wty

04-03-2003, 08:59 PM

Hi,

This probably sounds easy to you. How do I disable a CheckBox?

Thanks!

wty

Quiet Storm

04-03-2003, 09:05 PM

<INPUT TYPE="checkbox" DISABLED>

:D

Roy Sinclair

04-03-2003, 10:14 PM

Here's a bit of CODE in an example page showing how it can be used to disable or enable any kind of form field:

<html>
<head>
<script>
function disableField(myField)
{
myField.mydisabled = true
myField.style.color = "red"
return true
}
function enableField(myField)
{
myField.mydisabled = false
myField.style.color = "black"
return true
}
function onfocusField(myField)
{
if (myField.mydisabled)
{
myField.blur()
return false
}
return true;
}

function toggleFields(myField)
{
if (myField.checked)
{
disableField(document.forms["example1"].text1)
disableField(document.forms["example1"].checkbox1)
disableField(document.forms["example1"].select1)
}
else
{
enableField(document.forms["example1"].text1)
enableField(document.forms["example1"].checkbox1)
enableField(document.forms["example1"].select1)
}
document.forms["example1"].text1
}
</script>
</head>
<body>
<form name="example1">
Disable Fields: <input type="checkbox" name="control1" onclick="toggleFields(this)" checked="checked">
<br>
Text Field: <input type="text" name="text1" onfocus="return onfocusField(this)">
<br>
Check box: <input type="checkbox" name="checkbox1" onfocus="return onfocusField(this)" onclick="return onfocusField(this)">
<br>
Select: <select name="select1" onfocus="return onfocusField(this)">
<option>Option 1</option>
<option>Option 2</option>
</select>
</form>
<script>
disableField(document.forms["example1"].text1)
disableField(document.forms["example1"].checkbox1)
disableField(document.forms["example1"].select1)
</script>
</body>
</html>

wty

04-04-2003, 09:40 PM

Hi,
Thanks for reply back to my question!!
I am testing on Netscape 4.7. Just adding "DISABLED" didn't work. Roy's sample code works for field text1, but not for CheckBox or Drop Down list. Any ideas? Browser issue?

Is it possible to have a HIDDEN CheckBox with Checked Status?

Thanks!!

wty

Roy Sinclair

04-04-2003, 10:32 PM

Originally posted by wty
Hi,
Thanks for reply back to my question!!
I am testing on Netscape 4.7. Just adding "DISABLED" didn't work. Roy's sample code works for field text1, but not for CheckBox or Drop Down list. Any ideas? Browser issue?

Is it possible to have a HIDDEN CheckBox with Checked Status?

Thanks!!

wty

The page I posted above disables both the checkbox and the drop down in Netscape 4. Most of that code is there just to handle Netscape 4. The only thing that's wrong with that code is that it doesn't block the PASTE action in the text box.

chrismiceli

04-05-2003, 05:03 AM

Originally posted by Quiet Storm
<INPUT TYPE="checkbox" DISABLED>

you should never have any attributes with no assignment, bad html, should be

<input type="checkbox" disabled="true">

or in javascript to deactivate

document.inputname.disables=true;

//no quotes around true on purpose

whammy

04-05-2003, 11:16 PM

How right you are, chrismiceli. Slightly different, but still relevant:

I had to troubleshoot a non-working javascript function that someone else wrote at work, and believe it or not (I could be wrong, though), the conclusion that I came to (among a couple of others) was the initial problem was a lack of quotes in the HTML (although I tried to improve the javascript also)!

I've never seen this before, but this was in a Mozilla browser (Netscape 7.x).

The suspicious code was similar to:

<input type = text name = foobar value = whatever>

After messing with a few other things, I changed it to:

<input type="text" name="foobar" value="whatever" />

and, lo and behold, it worked... ?!?

Is Mozilla really that picky? If so, I personally think that's great! It pains me greatly to look at HTML as described above... ;)

chrismiceli

04-05-2003, 11:50 PM

yeah, the quotes are becomming standard, something to do with xml or something, ask beetle. It took me a while to figure out why this wasn't working

document.formname.elementname.disabled = "true";

turns out it needs to be like this for some reason

document.formname.elementname.disabled = true;

//edit fixed double typo.

whammy

04-05-2003, 11:52 PM

Oh, well that's a different case entirely - by putting quotes around "true", you were telling javascript that "true" was a string - not a boolean value. ;)

chrismiceli

04-05-2003, 11:56 PM

yeah, that took about a week of debugging a couple of months back
:D

whammy

04-06-2003, 12:01 AM

P.S. JavaScript (like most other languages) is really handy with boolean values... for instance, if you were checking the value of something, instead of this:

if (document.formname.elementname.disabled == true) {
// code here
}

You can just say this:

if (document.formname.elementname.disabled) {
// code here
}

chrismiceli

04-06-2003, 12:16 AM

sorry for the double typo.

whammy

04-06-2003, 12:21 AM

:)

No problem, just trying to share what limited knowledge I've acquired. ;)

Programming is one of the few things that can keep me from being bored (along with playing guitar, chess, a good first person shooter, hiking, or reading a good book), so I try to learn as much as I can when I have a chance (and us old guys don't learn too fast, lol). Mastering OOP in C# (and javascript!) is my next goal.