Disable Label object

[Tomazaz]

Maybe someone know how to disable Label object using JS?
I have HTML form with several controls, let say...

<LABEL id="UserPass">User:</LABEL><BR>
<input name="UserPass" type="text" id="UserPass" size="50" maxlength="8" >

When I run JS code below Edit box become disabled but Label not. Any solution? Maybe there is another solution to disable text in the form?

function disableControl() {

for (i = 0; i < document.forms[0].length; i++) {
var tempobj = document.forms[0].elements[i];
if (tempobj.id == "UserPass") {
tempobj.disabled = "true";

}
}
}

Regards,
Tomas

[Bernard Marx]

Firstly, you are using the label incorrectly
- and at the same time, using an id twice. It should be unique within the document.

<label for="UserPass">User:</label><br>
<input name="UserPass" type="text" id="UserPass" size="50" maxlength="8" >

The for attribute takes the value of the control's id (name doesn't work).

Now, what do you mean by "disabled"?
In what sense can a label be disabled?

[Tomazaz]

Thank you for reply.

I have changed my label tag as you suggested to
<LABEL for="UserPass">User:</LABEL>
Unfortunately it does not solve my problem.

I need to disable both controls, edit box and Label. Edit works OK, Label not.

Now about disable, it is the common thing in Windows, control could have enable/disable state. If you use FireFox for browsing, you can find STOP button in disable state if page loaded fully, also Copy/Cut buttons are always in disable state if text is not selected.

[Fotiman]

I need to disable both controls, edit box and Label. Edit works OK, Label not.

Now about disable, it is the common thing in Windows, control could have enable/disable state. If you use FireFox for browsing, you can find STOP button in disable state if page loaded fully, also Copy/Cut buttons are always in disable state if text is not selected.

There is no such thing as disabling a label. It does not DO anything that can be disabled. The examples you give (Stop button, Copy/Cut buttons) are "BUTTONS", not labels. Therefore they can be disabled.

[Bernard Marx]

Agreed

I need to disable both controls, edit box and Label.

A label is not a form control.

If a label's associated control is disabled then it is also disabled, in the sense that clicking on it causes no response.

Perhaps you'd like it to turn grey?

[Tomazaz]

Yes, I need to turn label to grey when aasociated control is disables.

You said that disabling label parent control, label also should be disabled?

Just tried code below, does not work.

<label for="UserPass">User:</label><br>
<input name="UserPass" type="text" id="UserPass" size="50" maxlength="8" disabled >

[Tomazaz]

There is no such thing as disabling a label. It does not DO anything that can be disabled. The examples you give (Stop button, Copy/Cut buttons) are "BUTTONS", not labels. Therefore they can be disabled.

All visual controls in Windows can be disabled, also Labels.

Even Label in HTML can be disabled, supported only by IE.

try this

<label for="UserPass" disabled="true">User:</label>

But I don't want to use this approach, I need global solution which works for all browsers.

For now I only see one way is to assing ID to label and using JS assign CSS style to it with grey color, like this:

document.all.control.style.color = ....

[Bernard Marx]

The easiest way is to define a CSS rule:

label.disabled{color: gray;}

Then assign this classname to the label when disabled.

It would be be more complicated if the labels have classnames already, and a little more if these classes already assign color.

A 100% reliable method would be based on ids (though I'd advise using document.getElementById ), or would run through the getElementsByTagName("label") collection getting references to the respective controls by passing the .htmlFor property to getElementById.