how to disable a label tag in javascript

Question

i need to create five labels using <label> tag in html. then when any one of the label is clicked all the other four labels must be disabled. i have searched through the google but could not find how to disable label tag. is there any way to do that.any suggestion......

<label for="u">username1</label>
<label for="u">username2</label>
<label for="u">username3</label>
<label for="u">username4</label>
<label for="u">username5</label>

Answer 1

You can see in the source a whole solution using Javascript and CSS. But if you want labels "look" like disabled you can use CSS this way:

In HTML

<label  class="disabled" for="u">username1 </label> 

In CSS

label.disabled { color: #aaa; }

Answer 2

Before looking at your example, I would have said:

A label can't be disabled. One of the effects it has is to extend the click target of a form control, so you probably want to disable the form control instead.

However, for some reason, all your labels are associated with the same control (the one with id="u" ), which suggests that you aren't using <label> correctly. It is possible to have multiple labels for a single control, but it doesn't look like you are doing that.

You should probably take a step back and describe the problem that you think disabling a label will solve.

Answer 3

You, cant disable the Labels. Instead u can set the Text property of the label to "" when one label is clicked for the other ones.

Answer 4

The correct way to do would be to not only make it look disabled but also to disable any action on click of it. I would use the below code for this purpose:

In HTML

<label  class="disableLabel" for="u">username1 </label> 

In CSS

.disableLabel {
    pointer-events: none;
    opacity: 0.5;
}