www.webdeveloper.com
Results 1 to 8 of 8

Thread: Disable certain radio buttons after initial selection

  1. #1
    Join Date
    Feb 2010
    Posts
    7

    Disable certain radio buttons after initial selection

    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>
    HTML Code:
    <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>
    any help much appreciated.

    thanks,

    --cz

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    CamelCase errors corrected
    Code:
    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}
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2010
    Posts
    7

    Not quite right

    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:
    HTML Code:
    <input type="radio" name="RegType" value="StuMem" onClick="Disab(2)"> Regular Non-Member
    should be:
    HTML Code:
    <input type="radio" name="RegType" value="StuMem" onClick="Disab(2)"> Student Member
    so here's the problem: if you select Student Member and then select Regular Non-Member, the last radio button (PostConf[2]) is not disabled. furthermore, if either PreConf2[2] or PostConf[2] are selected, they remain selected after the change of registration types to Regular Non-Member.

    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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:
    Code:
    form1.MainConf[1].checked=false;
    form1.Preconf2[1].checked=false;
    form1.PostConf[1].checked=false;
    form1.MainConf[2].checked=false;
    form1.Preconf2[2].checked=false;
    form1.PostConf[2].checked=false}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    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;
    }
    }
    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>
    and

    Code:
    label.enabled{ text-decoration:none; color:#000000; }
    label.disabled{ text-decoration:line-through; color:red; }
    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

  6. #6
    Join Date
    Feb 2010
    Posts
    7

    Thumbs up

    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 isn't 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...in-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

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb Consider this ...

    Check this thread to see if it is beneficial to you ...
    See: http://www.webdeveloper.com/forum/sh...d.php?t=223897

  8. #8
    Join Date
    Feb 2010
    Posts
    7

    resolved [Solved] Disable certain radio buttons after initial selection

    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;
    }
    }
    Note the addition of a 4th group (index 3).

    Thanks to all!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles