#1
  1. No Profile Picture
    I know he can get the job, but can he do the job?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    TEXAS
    Posts
    27
    Rep Power
    0

    What the ...!? JavaScript & Radio Buttons


    If one of you gurus could help with this I would much appreciate it. I'm trying to turn off the 'disabled' attribute in a set of radio buttons when another radio button is selected. The set of buttons are inactive until their 'grandfather' is activated.

    To see the code in context, find the disabled radio buttons on this page: http://www.firstprotestant.com/Add_Event.asp

    Code:
    <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
    <!--
    Function EnableDots(MonthlyOption) {
    	If (MonthlyOption.value == 2) {
    		for (i=0; i<document.AddEvent.D.length; i++) 
    		document.AddEvent.D[i].disabled = false 
    		}
    		else {
    		document.AddEvent.D[i].disabled = true
    		}
    	}
    //-->
    </SCRIPT>
    
    ........
    <form name="AddEvent">
        <label for="Monthly"> 
        <input type="radio" name="RepID" value="2" id="Monthly" OnClick="EnableDots(this);">
        every month on<br>
        </label> 
      <table width="400" border="0" cellspacing="0" cellpadding="2">
        <tr> 
          <td width="10">&nbsp;</td>
          <td width="382"> 
            <label for="emonth1"><input id="emonth1" type="radio" name="D" value="1" DISABLED>
            The first <%= weekdaysdate %> of every month</label> </td>
        </tr>
        <tr> 
          <td width="10">&nbsp;</td>
          <td width="382"> 
            <label for="emonth2"><input id="emonth2" type="radio" name="D" value="2" DISABLED>
            The second <%= weekdaysdate %> of every month</label> </td>
        </tr>
        <tr> 
          <td width="10">&nbsp; </td>
          <td width="382"> 
            <label for="emonth3"><input id="emonth3" type="radio" name="D" value="3" DISABLED>
            The third <%= weekdaysdate %> of every month</label></td>
        </tr>
        <tr> 
          <td width="10">&nbsp; </td>
          <td width="382"> 
            <label for="emonth4"><input id="emonth4" type="radio" name="D" value="4" DISABLED>
            The fourth <%= weekdaysdate %> of every month</label></td>
        </tr>
        <tr> 
          <td width="10">&nbsp; </td>
          <td width="382"> 
            <label for="emonth5"><input id="emonth5" type="radio" name="D" value="5" DISABLED>
            The fifth <%= weekdaysdate %> of every month</label></td>
        </tr>
        <tr> 
          <td width="10">&nbsp; </td>
          <td width="382"> 
            <label for="emonth0"><input id="emonth0" type="radio" name="D" value="0" DISABLED>
            The <%= monthdaysdate%> of every month</label></td>
        </tr>
      </table>
    </form>
    Last edited by joebankz; June 14th, 2001 at 11:24 PM.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    I took this directly from your source:
    (note: JS if is lower case; form input values are strings)

    Put this in your <script> block in the <head>:

    if (document.all || document.getElementById) {
    var EnableDots = function(B) {
    B = (B.value != '2');
    for (i=0; i<document.AddEvent.D.length; i++) {
    var b = document.AddEvent.D[i];
    if (B) b.checked = false;
    b.disabled = B;
    }
    }
    } else if (document.layers) {
    var EnableDots = function(B) {
    B = (B.value != '2');
    if (!B) document.AddEvent.D[0].checked = true;
    for (i=0; i<document.AddEvent.D.length; i++) {
    var b = document.AddEvent.D[i];
    if (B) b.checked = false;
    }
    }
    }

    Then, add this to all "RepID" inputs:

    onclick="EnableDots(this)"

    Finally, add this to all "D" inputs:

    onclick="this.form.RepID[2].checked=true"

    There's a workaround for Netscape 4, which doesn't support DISABLED - it's not as effective, but better than nothing. You can change the default 'every month on' by altering the index number in the fourth from the last line in the script.

    cheers, rob
    Last edited by adios; June 18th, 2001 at 06:12 PM.

IMN logo majestic logo threadwatch logo seochat tools logo