One checkbox at a time

[simasi]

I have 5 check box in my HTML (JSP). Out of those 5, at a time only 1 could be selected. So if I click on one check box, other 4 should be disabled. This is true for all the 5 check boxes.

var A= document.getElementById("A");
var B= document.getElementById("B");
var C= document.getElementById("C");
var D= document.getElementById("D");
var E= document.getElementById("E");

if(document.getElementById("A").checked == true){
eval("B.disabled = true");
eval("C.disabled = true");
eval("D.disabled = true");
eval("E.disabled = true");
} else {
eval("B.disabled = false");
eval("C.disabled = false");
eval("D.disabled = false");
eval("E.disabled = false");
}

This code is only for check of 'A' field. To do this for all 5 fields, I need to repeat this code 5 times.

Any better suggestions?

 

[feherke]

Hi

That is probably the worst approach's worst implementation.

Would be easier if your checkboxes would have identical [tt]name[/tt]. Is that the case or is it possible ?

Feherke.

http://rootshell.be/~feherke/

 

[simasi]

No they all have different properties. That is why..

 

[feherke]

Hi

Bad. Having common [tt]name[/tt] would make possible this :

[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"same"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"A"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"one"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"same"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"B"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"two"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"same"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"C"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"three"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"same"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"D"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"four"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"same"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"E"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"five"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]

[b]function[/b] [COLOR=darkgoldenrod]ch[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] list[teal]=[/teal]what[teal].[/teal]form[teal][[/teal]what[teal].[/teal]name[teal]][/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]list[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [b]if[/b] [teal]([/teal]what[teal].[/teal]checked[teal])[/teal] [b]if[/b] [teal]([/teal]list[teal][[/teal]i[teal]]!=[/teal]what[teal])[/teal] list[teal][[/teal]i[teal]].[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal] [b]else[/b][teal];[/teal] [b]else[/b] list[teal][[/teal]i[teal]].[/teal]disabled[teal]=[/teal][b]false[/b]
[teal]}[/teal]

Anyway. Do they have anything else common ?


Feherke.

http://rootshell.be/~feherke/

 

[feherke]

Hi

Are there other checkboxes, not involved in this enabling/disabling thing, on the same [tt]form[/tt] ?

Feherke.

http://rootshell.be/~feherke/

 

[snitin78]

Why not use radio buttons? That way you will automatically get the one-checkbox-allowed behavior.

 

[simasi]

>Why not use radio buttons? That way you will automatically get the one-checkbox-allowed behavior.

Yeah ;P

 

[simasi]

>Why not use radio buttons? That way you will automatically get the one-checkbox-allowed behavior.

Weird-ly requirement says it should be check box only ;P

 

[simasi]

>
Are there other checkboxes, not involved in this enabling/disabling thing, on the same form ?

NO

 

[feherke]

Hi

That way you will automatically get the one-checkbox-allowed behavior.

But will loose the no-checkbox-checked behavior. So will need JavaScript to clear all radio buttons.

NO

Then my previous code will need just some minor modifications. On the HTML part the only restriction is the common [tt]form[/tt].

[b]function[/b] [COLOR=darkgoldenrod]ch[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] list[teal]=[/teal]what[teal].[/teal]form[teal].[/teal]elements

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]list[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [b]if[/b] [teal]([/teal]list[teal][[/teal]i[teal]].[/teal]type[teal]==[/teal][green][i]'checkbox'[/i][/green][teal])[/teal] [b]if[/b] [teal]([/teal]what[teal].[/teal]checked[teal])[/teal] [b]if[/b] [teal]([/teal]list[teal][[/teal]i[teal]]!=[/teal]what[teal])[/teal] list[teal][[/teal]i[teal]].[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal] [b]else[/b][teal];[/teal] [b]else[/b] list[teal][[/teal]i[teal]].[/teal]disabled[teal]=[/teal][b]false[/b]
[teal]}[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

Here try this:

function disablerest(mycheckedbox){
    var A= document.getElementById("A");
    var B= document.getElementById("B");
    var C= document.getElementById("C");
    var D= document.getElementById("D");
    var E= document.getElementById("E");
 if(mycheckedbox.checked==true){
        eval("A.disabled = true");
        eval("B.disabled = true");
        eval("C.disabled = true");
        eval("D.disabled = true");
        eval("E.disabled = true");
        mycheckedbox.disabled=false;
} 

if(mycheckedbox.checked==false){
        eval("A.disabled = false");
        eval("B.disabled = false");
        eval("C.disabled = false");
        eval("D.disabled = false");
        eval("E.disabled = false");

}


}

And your HTML should look like:

<input type=checkbox name="A" id="A" onChange="disablerest(this);">
<input type=checkbox name="B" id="B" onChange="disablerest(this);">
<input type=checkbox name="C" id="C" onChange="disablerest(this);">
<input type=checkbox name="D" id="D" onChange="disablerest(this);">
<input type=checkbox name="E" id="E" onChange="disablerest(this);">

Basically what you are doing is passing the checkbox that got changed to the function. The the function just sets everything to disabled, and sets the one you passed to enabled. If you un-check it, it resets everything back to enabled so you may select another option.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[simasi]

Thanks vacunita, It works. Appreciate it!