Disable Multiple Form Components

[Total: 0    Average: 0/5]

This example shows how to have a radio button click disable/enable select lists and radio buttons.

Head Code:

<script language="JavaScript">
<!--
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IsIEPlus = false;
var IsNSPlus = false;
var Others = false;
if ((bName == "Netscape") && (bVer >= 3))
{
    IsNSPlus = true;
}
else if ((bName == "Microsoft Internet Explorer") && (bVer >=4))
{
    IsIEPlus = true;
}
//--></script>

Body Code:

<br>
<div align=center>
<form name="buttonmenu" method="post" action="">
  <table width="95%" border="0" cellspacing="2" cellpadding="2">
    <tr> 
      <td width="1%">&nbsp;</td>
      <td align=center width="3%"> 
        <input type="radio" name="buttontype" value="buttona" onClick="lockIt(_F,this)">
      </td>
      <td width="11%"><b>Button A</b> </td>
      <td width="3%">&nbsp;</td>
      <td colspan=5>&nbsp;</td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">A Menu1 </td>
      <td width="3%"> 
        <input type="radio" name="selectButtonA" value="amenu1"
		 onClick="BrowserCall(this)"</td>
      <td colspan=5> 
        <select name="amenu1" onfocus="if (isDis()) blur(); if (isDismenu1()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">A Menu2 </td>
      <td width="3%"> 
        <input type="radio" name="selectButtonA" value="amenu2" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="amenu2" onfocus="if (isDis()) blur(); if (isDismenu2()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">A Menu3</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonA" value="amenu3" onClick="BrowserCall(this)">
      </td>
      <td colspam=5> 
        <select name="amenu3" onfocus="if (isDis()) blur();if (isDismenu3()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">A Menu4</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonA" value="amenu4" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="amenu4" onfocus="if (isDis()) blur();if (isDismenu4()) blur();">
        </select>
      </td>
      
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">A Menu5</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonA" value="amenu5" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="amenu5" onfocus="if (isDis()) blur(); if (isDismenu5()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td colspan=5>&nbsp;</td>
    </tr>
<tr> 
      <td width="1%">&nbsp;</td>
      <td align=center width="3%"> 
        <input type="radio" name="buttontype" value="buttonb" onClick="lockIt(_T,this)">
      </td>
      <td width="11%"><b>Button B</b> </td>
      <td width="3%">&nbsp;</td>
      <td colspan=5>&nbsp;</td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">B Menu1 </td>
      <td width="3%"> 
        <input type="radio" name="selectButtonB" value="bmenu1" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="bmenu1" onfocus="if (!isDis()) this.blur();if (isDismenu6()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">B Menu2 </td>
      <td width="3%"> 
        <input type="radio" name="selectButtonB" value="bmenu2" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="bmenu2" onfocus= "if (!isDis()) this.blur();if (isDismenu7()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">B Menu3</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonB" value="bmenu3" onClick="BrowserCall(this)">
      </td>
      <td colspam=5> 
        <select name="bmenu3" onfocus= "if (!isDis()) this.blur();if (isDismenu8()) blur();">
        </select>
      </td>
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">B Menu4</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonB" value="bmenu4" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="bmenu4" onfocus= "if (!isDis()) this.blur();if (isDismenu9()) blur();">
        </select>
      </td>
      
    </tr>
    <tr> 
      <td width="1%">&nbsp;</td>
      <td width="3%">&nbsp;</td>
      <td width="11%">B Menu5</td>
      <td width="3%"> 
        <input type="radio" name="selectButtonB" value="bmenu5" onClick="BrowserCall(this)">
      </td>
      <td colspan=5> 
        <select name="bmenu5" onfocus= "if (!isDis()) this.blur();if (isDismenu10()) blur();">
        </select>
      </td>
    </tr>
</table>
  <!-- The following hidden fiels are only for Netscape-->
  <!-- lck field for "survetype" buttons -->
  <input type=hidden name="lck" value="unlocked">
  <!-- lockmenu fields are for selectClasssurevy buttons' related select list fields-->
  <input type=hidden name="lockmenu1"> 
  <input type=hidden name="lockmenu2"> 
  <input type=hidden name="lockmenu3">
  <input type=hidden name="lockmenu4">
  <input type=hidden name="lockmenu5">
  <input type=hidden name="lockmenu6">
  <input type=hidden name="lockmenu7">
  <input type=hidden name="lockmenu8">
  <input type=hidden name="lockmenu9">
  <input type=hidden name="lockmenu10">
</form>
</div>
<script language="JavaScript">
<!--

var _T = "locked";
var _F = "unlocked";

function lockIt(_P, whichbutton)
{
	if (IsIEPlus)
	{
		if (whichbutton.value=='buttona')
		{
			document.buttonmenu.bmenu1.disabled=true
			document.buttonmenu.bmenu2.disabled=true
			document.buttonmenu.bmenu3.disabled=true
			document.buttonmenu.bmenu4.disabled=true
			document.buttonmenu.bmenu5.disabled=true
			for (var i=0; i<document.buttonmenu.selectButtonB.length; i++)
			{
				document.buttonmenu.selectButtonB[i].disabled=true
				document.buttonmenu.selectButtonB[i].checked=false
			}
				
			document.buttonmenu.amenu1.disabled=false
			document.buttonmenu.amenu2.disabled=false
			document.buttonmenu.amenu3.disabled=false
			document.buttonmenu.amenu4.disabled=false
			document.buttonmenu.amenu5.disabled=false
			for (var i=0; i<document.buttonmenu.selectButtonA.length; i++)
				document.buttonmenu.selectButtonA[i].disabled=false
		}
		else if (whichbutton.value=='buttonb')
		{
			document.buttonmenu.amenu1.disabled=true
			document.buttonmenu.amenu2.disabled=true
			document.buttonmenu.amenu3.disabled=true
			document.buttonmenu.amenu4.disabled=true
			document.buttonmenu.amenu5.disabled=true
			for (var i=0; i<document.buttonmenu.selectButtonA.length; i++)
			{
				document.buttonmenu.selectButtonA[i].disabled=true
				document.buttonmenu.selectButtonA[i].checked=false
			}
				
			document.buttonmenu.bmenu1.disabled=false
			document.buttonmenu.bmenu2.disabled=false
			document.buttonmenu.bmenu3.disabled=false
			document.buttonmenu.bmenu4.disabled=false
			document.buttonmenu.bmenu5.disabled=false
			for (var i=0; i<document.buttonmenu.selectButtonB.length; i++)
				document.buttonmenu.selectButtonB[i].disabled=false
		}
	}
	else
	{
		var _L = document.buttonmenu.lck.value;

 		if (_L==_P) return;
		
		document.buttonmenu.amenu1.disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T;
document.buttonmenu.amenu2.disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T;
document.buttonmenu.amenu3.disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T;
document.buttonmenu.amenu4.disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T;
document.buttonmenu.amenu5.disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T; 

		for (var i=0; i<document.buttonmenu.selectButtonA.length; i++)
			document.buttonmenu.selectButtonA[i].disabled=(document.buttonmenu.lck.value=(_L==_F)?_T:_F)==_T;
		if (document.buttonmenu.lck.value==_T)
		{
			for (var i=0; i<document.buttonmenu.selectButtonA.length; i++)
				document.buttonmenu.selectButtonA[i].checked=false
		}
		else
		{
			for (var i=0; i<document.buttonmenu.selectButtonB.length; i++)
				document.buttonmenu.selectButtonB[i].checked=false
		}
	}	
}

function isDis() 
{ 
 return (document.buttonmenu.lck.value==_T)
}

function isDismenu1()
{
 return (document.buttonmenu.lockmenu1.value==_T)
}
function isDismenu2()
{
 return (document.buttonmenu.lockmenu2.value==_T)
}
function isDismenu3()
{
 return (document.buttonmenu.lockmenu3.value==_T)
}
function isDismenu4()
{
 return (document.buttonmenu.lockmenu4.value==_T)
}
function isDismenu5()
{
 return (document.buttonmenu.lockmenu5.value==_T)
}
function isDismenu6()
{
 return (document.buttonmenu.lockmenu6.value==_T)
}
function isDismenu7()
{
 return (document.buttonmenu.lockmenu7.value==_T)
}
function isDismenu8()
{
 return (document.buttonmenu.lockmenu8.value==_T)
}
function isDismenu9()
{
 return (document.buttonmenu.lockmenu9.value==_T)
}
function isDismenu10()
{
 return (document.buttonmenu.lockmenu10.value==_T)
}

function lockmore(whichbutton)
{
  	if (IsIEPlus)
	{
		switch (whichbutton.value)
		{
		case 'amenu1':
			document.buttonmenu.amenu1.disabled=false
			document.buttonmenu.amenu2.disabled=true
			document.buttonmenu.amenu3.disabled=true
			document.buttonmenu.amenu4.disabled=true
			document.buttonmenu.amenu5.disabled=true
			break;
		case 'amenu2':
			document.buttonmenu.amenu1.disabled=true
			document.buttonmenu.amenu2.disabled=false
			document.buttonmenu.amenu3.disabled=true
			document.buttonmenu.amenu4.disabled=true
			document.buttonmenu.amenu5.disabled=true
			break;
		case 'amenu3':
			document.buttonmenu.amenu1.disabled=true
			document.buttonmenu.amenu2.disabled=true
			document.buttonmenu.amenu3.disabled=false
			document.buttonmenu.amenu4.disabled=true
			document.buttonmenu.amenu5.disabled=true
			break;
		case 'amenu4':
			document.buttonmenu.amenu1.disabled=true
			document.buttonmenu.amenu2.disabled=true
			document.buttonmenu.amenu3.disabled=true
			document.buttonmenu.amenu4.disabled=false
			document.buttonmenu.amenu5.disabled=true
			break;
		case 'amenu5':
			document.buttonmenu.amenu1.disabled=true
			document.buttonmenu.amenu2.disabled=true
			document.buttonmenu.amenu3.disabled=true
			document.buttonmenu.amenu4.disabled=true
			document.buttonmenu.amenu5.disabled=false
			break;
		case 'bmenu1':
			document.buttonmenu.bmenu1.disabled=false
			document.buttonmenu.bmenu2.disabled=true
			document.buttonmenu.bmenu3.disabled=true
			document.buttonmenu.bmenu4.disabled=true
			document.buttonmenu.bmenu5.disabled=true
			break;
		case 'bmenu2':
			document.buttonmenu.bmenu1.disabled=true
			document.buttonmenu.bmenu2.disabled=false
			document.buttonmenu.bmenu3.disabled=true
			document.buttonmenu.bmenu4.disabled=true
			document.buttonmenu.bmenu5.disabled=true
			break;
		case 'bmenu3':
			document.buttonmenu.bmenu1.disabled=true
			document.buttonmenu.bmenu2.disabled=true
			document.buttonmenu.bmenu3.disabled=false
			document.buttonmenu.bmenu4.disabled=true
			document.buttonmenu.bmenu5.disabled=true
			break;
		case 'bmenu4':
			document.buttonmenu.bmenu1.disabled=true
			document.buttonmenu.bmenu2.disabled=true
			document.buttonmenu.bmenu3.disabled=true
			document.buttonmenu.bmenu4.disabled=false
			document.buttonmenu.bmenu5.disabled=true
			break;
		case 'bmenu5':
			document.buttonmenu.bmenu1.disabled=true
			document.buttonmenu.bmenu2.disabled=true
			document.buttonmenu.bmenu3.disabled=true
			document.buttonmenu.bmenu4.disabled=true
			document.buttonmenu.bmenu5.disabled=false
			break;
		}	
	} // end of IE
	else
	{
		switch (whichbutton.value) {
		case 'amenu1':
			document.buttonmenu.lockmenu1.value='unlocked'
			document.buttonmenu.lockmenu2.value='locked'
			document.buttonmenu.lockmenu3.value='locked'
			document.buttonmenu.lockmenu4.value='locked'
			document.buttonmenu.lockmenu5.value='locked'
			document.buttonmenu.amenu1.disabled=_F
		
			document.buttonmenu.amenu2.disabled=_T
			document.buttonmenu.amenu3.disabled=_T
			document.buttonmenu.amenu4.disabled=_T
			document.buttonmenu.amenu5.disabled=_T
			break
		case 'amenu2':
			document.buttonmenu.lockmenu1.value='locked'
			document.buttonmenu.lockmenu2.value='unlocked'
			document.buttonmenu.lockmenu3.value='locked'
			document.buttonmenu.lockmenu4.value='locked'
			document.buttonmenu.lockmenu5.value='locked'
			document.buttonmenu.amenu2.disabled=_F
			
			document.buttonmenu.amenu1.disabled=_T
			document.buttonmenu.amenu3.disabled=_T
			document.buttonmenu.amenu4.disabled=_T
			document.buttonmenu.amenu5.disabled=_T
			break
		case 'amenu3':
			document.buttonmenu.lockmenu1.value='locked'
			document.buttonmenu.lockmenu2.value='locked'
			document.buttonmenu.lockmenu3.value='unlocked'
			document.buttonmenu.lockmenu4.value='locked'
			document.buttonmenu.lockmenu5.value='locked'
			document.buttonmenu.amenu3.disabled=_F
			
		    document.buttonmenu.amenu1.disabled=_T
			document.buttonmenu.amenu2.disabled=_T
			document.buttonmenu.amenu4.disabled=_T
			document.buttonmenu.amenu5.disabled=_T
			break
		case 'amenu4':
			document.buttonmenu.lockmenu1.value='locked'
			document.buttonmenu.lockmenu2.value='locked'
			document.buttonmenu.lockmenu3.value='locked'
			document.buttonmenu.lockmenu4.value='unlocked'
			document.buttonmenu.lockmenu5.value='locked'
			document.buttonmenu.amenu4.disabled=_F
			
			document.buttonmenu.amenu1.disabled=_T
			document.buttonmenu.amenu2.disabled=_T
			document.buttonmenu.amenu3.disabled=_T
			document.buttonmenu.amenu5.disabled=_T
			break
		case 'amenu5':
			document.buttonmenu.lockmenu1.value='locked'
			document.buttonmenu.lockmenu2.value='locked'
			document.buttonmenu.lockmenu3.value='locked'
			document.buttonmenu.lockmenu4.value='locked'
			document.buttonmenu.lockmenu5.value='unlocked'
			document.buttonmenu.amenu5.disabled=_F
			
			document.buttonmenu.amenu1.disabled=_T
			document.buttonmenu.amenu2.disabled=_T
			document.buttonmenu.amenu3.disabled=_T
			document.buttonmenu.amenu4.disabled=_T
			break
		case 'bmenu1':
			document.buttonmenu.lockmenu6.value='unlocked'
			document.buttonmenu.lockmenu7.value='locked'
			document.buttonmenu.lockmenu8.value='locked'
			document.buttonmenu.lockmenu9.value='locked'
			document.buttonmenu.lockmenu10.value='locked'
			document.buttonmenu.bmenu1.disabled=_F
			
			document.buttonmenu.bmenu2.disabled=_T
			document.buttonmenu.bmenu3.disabled=_T
			document.buttonmenu.bmenu4.disabled=_T
			document.buttonmenu.bmenu5.disabled=_T
			break
		case 'bmenu2':
			document.buttonmenu.lockmenu6.value='locked'
			document.buttonmenu.lockmenu7.value='unlocked'
			document.buttonmenu.lockmenu8.value='locked'
			document.buttonmenu.lockmenu9.value='locked'
			document.buttonmenu.lockmenu10.value='locked'
			document.buttonmenu.bmenu2.disabled=_F
			
			document.buttonmenu.bmenu1.disabled=_T
			document.buttonmenu.bmenu3.disabled=_T
			document.buttonmenu.bmenu4.disabled=_T
			document.buttonmenu.bmenu5.disabled=_T
			break
		case 'bmenu3':
			document.buttonmenu.lockmenu6.value='locked'
			document.buttonmenu.lockmenu7.value='locked'
			document.buttonmenu.lockmenu8.value='unlocked'
			document.buttonmenu.lockmenu9.value='locked'
			document.buttonmenu.lockmenu10.value='locked'
			document.buttonmenu.bmenu3.disabled=_F
			
			document.buttonmenu.bmenu1.disabled=_T
			document.buttonmenu.bmenu2.disabled=_T
			document.buttonmenu.bmenu4.disabled=_T
			document.buttonmenu.bmenu5.disabled=_T
			break
		case 'bmenu4':
			document.buttonmenu.lockmenu6.value='locked'
			document.buttonmenu.lockmenu7.value='locked'
			document.buttonmenu.lockmenu8.value='locked'
			document.buttonmenu.lockmenu9.value='unlocked'
			document.buttonmenu.lockmenu10.value='locked'
			document.buttonmenu.bmenu4.disabled=_F
			
			document.buttonmenu.bmenu1.disabled=_T
			document.buttonmenu.bmenu2.disabled=_T
			document.buttonmenu.bmenu3.disabled=_T
			document.buttonmenu.bmenu5.disabled=_T
			break
		case 'bmenu5':
			document.buttonmenu.lockmenu6.value='locked'
			document.buttonmenu.lockmenu7.value='locked'
			document.buttonmenu.lockmenu8.value='locked'
			document.buttonmenu.lockmenu9.value='locked'
			document.buttonmenu.lockmenu10.value='unlocked'
			document.buttonmenu.bmenu5.disabled=_F
			
			document.buttonmenu.bmenu1.disabled=_T
			document.buttonmenu.bmenu2.disabled=_T
			document.buttonmenu.bmenu3.disabled=_T
			document.buttonmenu.bmenu4.disabled=_T
			break
		}
		
	}
}

function BrowserCall(whichbutton)
{
	if (IsIEPlus)
		lockmore(whichbutton)
	else
	{
		switch (whichbutton.value) {
		case 'amenu1':
			if (isDis()) document.buttonmenu.selectButtonA[0].checked=false
			break
		case 'amenu2':
			if (isDis()) document.buttonmenu.selectButtonA[1].checked=false
			break
		case 'amenu3':
			if (isDis()) document.buttonmenu.selectButtonA[2].checked=false
			break
		case 'amenu4':
			if (isDis()) document.buttonmenu.selectButtonA[3].checked=false
			break
		case 'amenu5':
			if (isDis()) document.buttonmenu.selectButtonA[4].checked=false
			break
		case 'bmenu1':
			if (!isDis()) document.buttonmenu.selectButtonB[0].checked=false
			break
		case 'bmenu2':
			if (!isDis()) document.buttonmenu.selectButtonB[1].checked=false
			break
		case 'bmenu3':
			if (!isDis()) document.buttonmenu.selectButtonB[2].checked=false
			break
		case 'bmenu4':
			if (!isDis()) document.buttonmenu.selectButtonB[3].checked=false
			break
		case 'bmenu5':
			if (!isDis()) document.buttonmenu.selectButtonB[4].checked=false
			break
		}
		// when user clicks one of enabled buttons
		lockmore(whichbutton)
	} 
}
//--></script>

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *