Disable certain radio buttons after initial selection

@seezeeFeb 03.2010

I’m trying to get the following code to work. It’s fine if there are only 2 sets, but once you add a 3rd or 4th it breaks. making a choice of either regular non-member or student member & then changing to another choice fails to disable the last button and also fails to clear selections.

note that it is not a requirement that i use radio buttons for the disabled/enabled choices; they could be checkboxes instead.

[CODE]<script language=”JavaScript”> function Disab (val) { if(val==”0″) {document.form1.MainConf[0].disabled=false; document.form1.PreConf2[0].disabled=false; document.form1.PostConf[0].disabled=false; document.form1.MainConf[1].disabled=true;form1.MainConf[1].checked=false; document.form1.PreConf2[1].disabled=true;form1.Preconf2[1].checked=false; document.form1.PostConf[1].disabled=true;form1.PostConf[1].checked=false; document.form1.MainConf[2].disabled=true;form1.MainConf[2].checked=false; document.form1.PreConf2[2].disabled=true;form1.Preconf2[2].checked=false; document.form1.PostConf[2].disabled=true;form1.PostConf[2].checked=false} if(val==”1″) {document.form1.MainConf[1].disabled=false; document.form1.PreConf2[1].disabled=false; document.form1.PostConf[1].disabled=false; document.form1.MainConf[0].disabled=true;form1.MainConf[0].checked=false; document.form1.PreConf2[0].disabled=true;form1.PreConf2[0].checked=false; document.form1.PostConf[0].disabled=true;form1.PostConf[0].checked=false; document.form1.MainConf[2].disabled=true;form1.MainConf[2].checked=false; document.form1.PreConf2[2].disabled=true;form1.Preconf2[2].checked=false; document.form1.PostConf[2].disabled=true;form1.PostConf[2].checked=false} if(val==”2″) {document.form1.MainConf[2].disabled=false; document.form1.PreConf2[2].disabled=false; document.form1.PostConf[2].disabled=false; document.form1.MainConf[0].disabled=true;form1.MainConf[0].checked=false; document.form1.PreConf2[0].disabled=true;form1.PreConf2[0].checked=false; document.form1.PostConf[0].disabled=true;form1.PostConf[0].checked=false; document.form1.MainConf[1].disabled=true;form1.MainConf[1].checked=false; document.form1.PreConf2[1].disabled=true;form1.Preconf2[1].checked=false; document.form1.PostConf[1].disabled=true;form1.PostConf[1].checked=false} } </script> [/CODE]
[code=html]<form name=”form1″ method=”post” action=””> <input type=”radio” name=”RegType” value=”RegMem” onClick=”Disab(0)”> Regular Member <input type=”radio” name=”RegType” value=”NonMem” onClick=”Disab(1)”> Regular Non-Member <input type=”radio” name=”RegType” value=”StuMem” onClick=”Disab(2)”> Regular Non-Member <br /> <input type=”radio” name=”MainConf” value=”75″ disabled=”disabled” /> $75 <input type=”radio” name=”MainConf” value=”105″ disabled=”disabled” /> $105 <input type=”radio” name=”MainConf” value=”35″ disabled=”disabled” /> $35 <br />

<input type=”radio” name=”PreConf2″ value=”25″ disabled=”disabled” /> $25 <input type=”radio” name=”PreConf2″ value=”35″ disabled=”disabled” /> $35 <input type=”radio” name=”PreConf2″ value=”10″ disabled=”disabled” /> $10 <br />

<input type=”radio” name=”PostConf” value=”0″ disabled=”disabled” /> FREE <input type=”radio” name=”PostConf” value=”20″ disabled=”disabled” /> $20 <input type=”radio” name=”PostConf” value=”20″ disabled=”disabled” /> FREE

</form>[/code]

any help much appreciated.

thanks,

–cz

to post a comment

JavaScript

7 Comments(s) _↴

@FangFeb 03.2010 — #CamelCase errors corrected

function Disab (val) {
 var f = document.form1;
 if(val=="0") 
 {f.MainConf[0].disabled=false;
 f.PreConf2[0].disabled=false;
 f.PostConf[0].disabled=false;
 f.MainConf[1].disabled=true;f.MainConf[1].checked=false;
 f.PreConf2[1].disabled=true;f.PreConf2[1].checked=false;
 f.PostConf[1].disabled=true;f.PostConf[1].checked=false;
 f.MainConf[2].disabled=true;f.MainConf[2].checked=false;
 f.PreConf2[2].disabled=true;f.PreConf2[2].checked=false;
 f.PostConf[2].disabled=true;f.PostConf[2].checked=false}
 if(val=="1") 
 {f.MainConf[1].disabled=false;
 f.PreConf2[1].disabled=false;
 f.PostConf[1].disabled=false;
 f.MainConf[0].disabled=true;f.MainConf[0].checked=false;
 f.PreConf2[0].disabled=true;f.PreConf2[0].checked=false;
 f.PostConf[0].disabled=true;f.PostConf[0].checked=false;
 f.MainConf[2].disabled=true;f.MainConf[2].checked=false;
 f.PreConf2[2].disabled=true;f.PrecConf2[2].checked=false;
 f.PostConf[2].disabled=true;f.PostConf[2].checked=false}
 if(val=="2")
 {f.MainConf[2].disabled=false;
 f.PreConf2[2].disabled=false;
 f.PostConf[2].disabled=false;
 f.MainConf[0].disabled=true;f.MainConf[0].checked=false;
 f.PreConf2[0].disabled=true;f.PreConf2[0].checked=false;
 f.PostConf[0].disabled=true;f.PostConf[0].checked=false;
 f.MainConf[1].disabled=true;f.MainConf[1].checked=false;
 f.PreConf2[1].disabled=true;f.PreConf2[1].checked=false;
 f.PostConf[1].disabled=true;f.PostConf[1].checked=false}
 }

@seezeeauthorFeb 03.2010 — #hi, fang;

i applied your patch, which definitely improved matters, but some errors still appearing. but before i describe that, there's a typo in the html i posted:
[code=html]<input type="radio" name="RegType" value="StuMem" onClick="Disab(2)"> Regular Non-Member[/code]
should be:
[code=html]<input type="radio" name="RegType" value="StuMem" onClick="Disab(2)"> Student Member[/code]
so here's the problem: if you select [I]Student Member[/I] and then select [I]Regular Non-Member[/I], the last radio button ([I]PostConf[2][/I]) is not disabled. furthermore, if either [I]PreConf2[2][/I] or [I]PostConf[2][/I] are selected, they remain selected after the change of registration types to [I]Regular Non-Member[/I].

also, can you explain CamelCase errors? i looked up the wiki on this charming coinage, but it lacks a discussion of how it might affect scripts.

@FangFeb 04.2010 — #I do think this is the wrong approach. It's difficult to see which controls are disabled.

a less confusing approach is to hide all radios rather than disabling them. Once a selection is made, then show the radios which can be selected.

With a UI, only show the user what they need to see, not all options.

CamelCase error:

form1.MainConf[1].checked=false;
 form1.Pre[COLOR="Red"]c[/COLOR]onf2[1].checked=false;
 form1.PostConf[1].checked=false;
 form1.MainConf[2].checked=false;
 form1.Pre[COLOR="Red"]c[/COLOR]onf2[2].checked=false;
 form1.PostConf[2].checked=false}

@Gozzy82Feb 04.2010 — #You can hide the options like Fang suggested or make it clear the options are not available anymore, you can do this:

[CODE]
 function Disab (val) {
 this.d = function(el){
 el.disabled=true;
 el.checked=false;
 if(el.parentNode.tagName == "LABEL")el.parentNode.className = 'disabled';}
 this.en = function(el){
 el.disabled=false;
 if(el.parentNode.tagName == "LABEL")el.parentNode.className = 'enabled';
 }
 if(val===0){
 en(document.form1.MainConf[0]);
 en(document.form1.PreConf2[0]);
 en(document.form1.PostConf[0]);
 d(document.form1.MainConf[1]);
 d(document.form1.PreConf2[1]);
 d(document.form1.PostConf[1]);
 d(document.form1.MainConf[2]);
 d(document.form1.PreConf2[2]);
 d(document.form1.PostConf[2]);
 }
 if(val===1){
 document.form1.MainConf[1].disabled=false;
 document.form1.PreConf2[1].disabled=false;
 document.form1.PostConf[1].disabled=false;
 document.form1.MainConf[0].disabled=true;
 document.form1.MainConf[0].checked=false;
 document.form1.PreConf2[0].disabled=true;
 document.form1.PreConf2[0].checked=false;
 document.form1.PostConf[0].disabled=true;
 document.form1.PostConf[0].checked=false;
 document.form1.MainConf[2].disabled=true;
 document.form1.MainConf[2].checked=false;
 document.form1.PreConf2[2].disabled=true;
 document.form1.Preconf2[2].checked=false;
 document.form1.PostConf[2].disabled=true;
 document.form1.PostConf[2].checked=false;
 }
 if(val===2){
 document.form1.MainConf[2].disabled=false;
 document.form1.PreConf2[2].disabled=false;
 document.form1.PostConf[2].disabled=false;
 document.form1.MainConf[0].disabled=true;
 document.form1.MainConf[0].checked=false;
 document.form1.PreConf2[0].disabled=true;
 document.form1.PreConf2[0].checked=false;
 document.form1.PostConf[0].disabled=true;
 document.form1.PostConf[0].checked=false;
 document.form1.MainConf[1].disabled=true;
 document.form1.MainConf[1].checked=false;
 document.form1.PreConf2[1].disabled=true;
 document.form1.Preconf2[1].checked=false;
 document.form1.PostConf[1].disabled=true;
 document.form1.PostConf[1].checked=false;
 }
 }
 [/CODE]

with

[CODE]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>Test</title>
 </head>
 <body>
 <form name="form1" method="post" action="">
 <input type="radio" name="RegType" value="RegMem" onClick="Disab(0)"> Regular Member
 <input type="radio" name="RegType" value="NonMem" onClick="Disab(1)"> Regular Non-Member
 <input type="radio" name="RegType" value="StuMem" onClick="Disab(2)"> Student Member
 <br />
 <label><input type="radio" name="MainConf" value="75" disabled="disabled" /> $75</label>
 <label><input type="radio" name="MainConf" value="105" disabled="disabled" /> $105</label>
 <label><input type="radio" name="MainConf" value="35" disabled="disabled" /> $35</label>
 <br />
 
 <input type="radio" name="PreConf2" value="25" disabled="disabled" /> $25
 <input type="radio" name="PreConf2" value="35" disabled="disabled" /> $35
 <input type="radio" name="PreConf2" value="10" disabled="disabled" /> $10
 <br />
 
 <input type="radio" name="PostConf" value="0" disabled="disabled" /> FREE
 <input type="radio" name="PostConf" value="20" disabled="disabled" /> $20
 <input type="radio" name="PostConf" value="20" disabled="disabled" /> FREE
 
 </form>
 </body>
 </html>
 [/CODE]

and

[CODE]
 label.enabled{ text-decoration:none; color:#000000; }
 label.disabled{ text-decoration:line-through; color:red; }
 [/CODE]

or check it out on http://www.webdevout.net/test?0M (only visible for 7 days after posting)

I only did the first one ( if(val===0){ ) i changed == to === because your passing an int to that function so type checking is not necessary

and i added a inner function to function Disab (val) so its easier to see what your doing.

and i added a <label></label> around the first three tags to make it possible to use some css to make clear to the user the option is disabled.

And as a bonus people can click the text and the radio is checked (basic function of a label) instead of having to click the little radiobutton

i hope this will help you somewhat

grts Gozzy

@seezeeauthorFeb 04.2010 — #That last one certainly did the trick -- except the CSS doesn't get reapplied if the user changes selection. It also doesn't get applied if the initial choice [I]isn't[/I] Regular Member. But it's a good suggestion to use styles in addition to disabling the buttons.

As to adding labels, I didn't include them in my example so as not to include too much cruft that might make it hard to diagnose what's going on. Once I get everything working I intend to add the semantic elements. Right now the form is in a table, so I need to re-write it using divs, fieldsets & legends.

If anyone out there wants to take a whack at making the CSS strike-thru act as intended, I'll certainly use it on the form. You might consider adding comments to the JS so anyone else stumbling on this forum can understand what's happening in the code.

As a thank you to all who wrote in, I have found these sources invaluable in my previous form designs:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://www.dominicsayers.com/isemail/

My 'request a quote' form uses elements of both: http://messengerwebdesign.com/?page=request-quote

Please feel free to view the code & use it in your designs (write to me if you need to see the PHP).

Cheers,

--cz

@JMRKERFeb 04.2010 — #Check this thread to see if it is beneficial to you ...

See: http://www.webdeveloper.com/forum/showthread.php?t=223897

?

@seezeeauthorFeb 04.2010 — #Actually, this works:

[CODE]if(val===0){
 en(document.form1.MainConf[0]);
 en(document.form1.PreConf2[0]);
 en(document.form1.PostConf[0]);
 d(document.form1.MainConf[1]);
 d(document.form1.PreConf2[1]);
 d(document.form1.PostConf[1]);
 d(document.form1.MainConf[2]);
 d(document.form1.PreConf2[2]);
 d(document.form1.PostConf[2]);
 d(document.form1.MainConf[3]);
 d(document.form1.PreConf2[3]);
 d(document.form1.PostConf[3]);
 }
 if(val===1){
 en(document.form1.MainConf[1]);
 en(document.form1.PreConf2[1]);
 en(document.form1.PostConf[1]);
 d(document.form1.MainConf[0]);
 d(document.form1.PreConf2[0]);
 d(document.form1.PostConf[0]);
 d(document.form1.MainConf[2]);
 d(document.form1.PreConf2[2]);
 d(document.form1.PostConf[2]);
 d(document.form1.MainConf[3]);
 d(document.form1.PreConf2[3]);
 d(document.form1.PostConf[3]);
 document.form1.MainConf[1].disabled=false;
 document.form1.PreConf2[1].disabled=false;
 document.form1.PostConf[1].disabled=false;
 document.form1.MainConf[0].disabled=true;
 document.form1.MainConf[0].checked=false;
 document.form1.PreConf2[0].disabled=true;
 document.form1.PreConf2[0].checked=false;
 document.form1.PostConf[0].disabled=true;
 document.form1.PostConf[0].checked=false;
 document.form1.MainConf[2].disabled=true;
 document.form1.MainConf[2].checked=false;
 document.form1.PreConf2[2].disabled=true;
 document.form1.PreConf2[2].checked=false;
 document.form1.PostConf[2].disabled=true;
 document.form1.PostConf[2].checked=false;
 document.form1.MainConf[3].disabled=true;
 document.form1.MainConf[3].checked=false;
 document.form1.PreConf2[3].disabled=true;
 document.form1.PreConf2[3].checked=false;
 document.form1.PostConf[3].disabled=true;
 document.form1.PostConf[3].checked=false;
 }
 if(val===2){
 en(document.form1.MainConf[2]);
 en(document.form1.PreConf2[2]);
 en(document.form1.PostConf[2]);
 d(document.form1.MainConf[0]);
 d(document.form1.PreConf2[0]);
 d(document.form1.PostConf[0]);
 d(document.form1.MainConf[1]);
 d(document.form1.PreConf2[1]);
 d(document.form1.PostConf[1]);
 d(document.form1.MainConf[3]);
 d(document.form1.PreConf2[3]);
 d(document.form1.PostConf[3]);
 document.form1.MainConf[2].disabled=false;
 document.form1.PreConf2[2].disabled=false;
 document.form1.PostConf[2].disabled=false;
 document.form1.MainConf[0].disabled=true;
 document.form1.MainConf[0].checked=false;
 document.form1.PreConf2[0].disabled=true;
 document.form1.PreConf2[0].checked=false;
 document.form1.PostConf[0].disabled=true;
 document.form1.PostConf[0].checked=false;
 document.form1.MainConf[1].disabled=true;
 document.form1.MainConf[1].checked=false;
 document.form1.PreConf2[1].disabled=true;
 document.form1.PreConf2[1].checked=false;
 document.form1.PostConf[1].disabled=true;
 document.form1.PostConf[1].checked=false;
 document.form1.MainConf[3].disabled=true;
 document.form1.MainConf[3].checked=false;
 document.form1.PreConf2[3].disabled=true;
 document.form1.PreConf2[3].checked=false;
 document.form1.PostConf[3].disabled=true;
 document.form1.PostConf[3].checked=false;
 }
 if(val===3){
 en(document.form1.MainConf[3]);
 en(document.form1.PreConf2[3]);
 en(document.form1.PostConf[3]);
 d(document.form1.MainConf[0]);
 d(document.form1.PreConf2[0]);
 d(document.form1.PostConf[0]);
 d(document.form1.MainConf[1]);
 d(document.form1.PreConf2[1]);
 d(document.form1.PostConf[1]);
 d(document.form1.MainConf[2]);
 d(document.form1.PreConf2[2]);
 d(document.form1.PostConf[2]);
 document.form1.MainConf[3].disabled=false;
 document.form1.PreConf2[3].disabled=false;
 document.form1.PostConf[3].disabled=false;
 document.form1.MainConf[0].disabled=true;
 document.form1.MainConf[0].checked=false;
 document.form1.PreConf2[0].disabled=true;
 document.form1.PreConf2[0].checked=false;
 document.form1.PostConf[0].disabled=true;
 document.form1.PostConf[0].checked=false;
 document.form1.MainConf[1].disabled=true;
 document.form1.MainConf[1].checked=false;
 document.form1.PreConf2[1].disabled=true;
 document.form1.PreConf2[1].checked=false;
 document.form1.PostConf[1].disabled=true;
 document.form1.PostConf[1].checked=false;
 document.form1.MainConf[2].disabled=true;
 document.form1.MainConf[2].checked=false;
 document.form1.PreConf2[2].disabled=true;
 document.form1.PreConf2[2].checked=false;
 document.form1.PostConf[2].disabled=true;
 document.form1.PostConf[2].checked=false;
 }
 }[/CODE]

Note the addition of a 4th group (index 3).

Thanks to all!

Also in #JavaScript _↴

Making a element id dynamic instead of instatic I have 3 stringS (news feed) of text which I want to search using loop function...auto increase textarea

Success!

Help @seezee spread the word by sharing this article on Twitter...

Tweet This

Disable certain radio buttons after initial selection

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Disable certain radio buttons after initial selection

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴