I need to disable 2 listboxes using javascript when a checkbox is checked. The code below behaves properly in IE but the listboxes do not disable in Firefox and Chrome. When the checkbox, cb_SameAccess is checked, I need to prevent the user from being able to select a value from the listboxes, system and region. These listboxes are created using coldfusion code.

When the checkbox is checked, it will call the javascript function, disableSystemRegion()

Code:
function disableSystemRegion()
				{
					if(document.getElementById('cb_SameAccess').checked)
					{
						alert("not enabled");
						<cfset system = "testSystem">
						<cfset region = "testRegion">
						//jQuery("input[type='text']").attr("disabled", 'disabled');
				    //jQuery("input[type='text']").prop("disabled", true);
						//document.getElementById('sameAccess').disabled = true;
						//document.getElementById('system').disabled = true;
						//document.getElementsByName('colSystem').setAttribute('disabled',true);
						document.getElementById('colSystem').setAttribute("disabled","disabled");
						document.getElementById('colRegion').setAttribute("disabled","disabled");
						//document.getElementById('system').setAttribute("disabled","disabled");
						//document.getElementById('region').setAttribute("disabled","disabled");
	
	
						//document.getElementById('region').disabled = true;
					}
					else
					{
						alert("enabled");
						//document.getElementById('sameAccess').disabled = false;
						//document.getElementById('sameAccess').setAttribute('disabled',false);
						//document.getElementById('colSystem').setAttribute('disabled',false);
						//document.getElementById('colRegion').setAttribute('disabled',false);
						//document.getElementsByName('colSystem').removeAttribute("disabled");
						//document.getElementById('system').removeAttribute("disabled");
						//document.getElementById('region').removeAttribute("disabled");
						document.getElementById('colSystem').removeAttribute("disabled");
						document.getElementById('colRegion').removeAttribute("disabled");
						
						
					//	document.getElementById('region').disabled = false;
					}
				}
It behaves properly in IE, but I cannot get it to disable in Firefox and Chrome. Any help will be appreciated. Thanks in advance! Below is my code for the form.

HTML Code:
<body bgcolor=##f6f6f6 link=##000088 vlink=##000088 marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>
			<br>
				
			<form class="entryform" id="entryform" name="entryform" action="#ME#" method="post">	<!--- Don't use name attribute in form element, use id --->
			<!--<form id="entryform" action="#ME#" method="post">-->
			  <input type="hidden" name="mode" value="save">
				<div class="header" id="header">
				  <img width=50 height=50 src="#application.IMAGEDIR#/account_application.gif">	#say('account_application_step1')#
				</div> <!--- header --->
				
				<div class="tableInstructions1" id="instructions1">
				  <table style="border:solid red 1px;" class="body">
				    <tr>
						  <td>
							  <p class=section><b>#say('account_application_approval_new')#</b></p>
								<p class=body"><span class="errors">*</span> #say('employee_updates_not_include')#</p>
				      </td>
				  	</tr>
					</table>				
				</div> <!--- instructions1 --->
				
				<div id="instructions2">
				  <p class=body>
				    #say('account_approval')#
						<a href="#application.WWWROOT#/">#say('return_to_srm')#</a>
					</p>								
				</div> <!--- instructions2 --->
				
				<div id="applicantInfo">
				  <p class=section>#say('account_application_info')#:</p>
 				  <table frame="border" style="margin-bottom:10px;">
				    <tr>
					    <cfif isdefined("formerrors.userid")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class=label nowrap>#say('employee_id')# (e.g. 12345):</td>
				      <td class="default"><input type="text" size=10 name="userid" value="#htmlEditFormat(userid)#">
				        [ <a class="body" href="javascript: checkuserid();">#say('verify')#</a> ]
					    </td>
				    </tr>
				    <tr>					
					    <td class="default" colspan="2">
						    <span class="errors">*</span> If contractor, please provide your XID.
					    </td>
				    </tr>
				    <tr>
					    <cfif isdefined("formerrors.firstname")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class=label>#say('firstname')#:</td>
					    <td><input type="text" size=20 name="firstname" value="#htmlEditFormat(firstname)#"></td>
				    </tr>
				    <tr>
					    <cfif isdefined("formerrors.lastname")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class=label>#say('lastname')#:</td>
					    <td><input type="text" size=20 name="lastname" value="#htmlEditFormat(lastname)#"></td>
				    </tr>
				    <tr>
					    <cfif isdefined("formerrors.email")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class=label>#say('email')#:</td>
					    <td><input type="text" size=20 name="email" value="#htmlEditFormat(email)#"></td>
				    </tr>
				    <tr>
					    <cfif isdefined("formerrors.phone")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class=label>#say('phone_number')#:</td>
					    <td><input type="text" size=20 name="phone" onblur=validatePhoneNum() value="#htmlEditFormat(phone)#"></td>
				    </tr>
						<tr>
              <cfif isdefined("formerrors.sameas_empid")><span class=errors>&gt;&gt;</span></cfif>
				      <!--<td width=280 class=default><span class="errors">*</span> Request same access as employee (T-ID):</td>-->
				     	<td><input type="checkbox" name="cb_SameAccess" id="cb_SameAccess" value=1 onclick="disableSystemRegion()">Same access as employee (TID, XID):<br></td>
							<!--<td colspan=2><input type="checkbox" id="cb_Role" onclick="enableDates()">Act as another role for a period of time<br></td>-->
							<td class="default">
							  <input type="text" size=10 name="sameas_empid" value="#htmlEditFormat(sameas_empid)#">
				      </td>
				    </tr>
					</table>				
				</div> <!--- applicantInfo --->
				
				<div id="systemRegion">
				  <table border=1 style="margin-bottom:10px;">
					  <tr id="divnewaccess2">									
				      <td class="default" colspan="2">
							  <span class="errors">*</span> If provided, this will speed up processing of your application.
				      </td>									
				    </tr>				
				    <!--<tr id="divnewaccess3" style="display:none">-->
						<tr id="systemID">
						  <cfif isdefined("formerrors.region")><span class=errors>&gt;&gt;</span></cfif>
							<td width=280 class=label>#say('system')#(s):</td>					
							<td width=300 id="colSystem">
							  <cf_customlistbox
								  selectattr='name="system"  class=small size=3 multiple'
									values="SKED,OATS,SMC,SRM,TOMCAT"
									options="SKED,OATS,SMC,SRM/SGR,TOMCAT"
									default="#system#">
				      </td>
				    </tr>
						<tr id="regionID">
						  <cfif isdefined("formerrors.region")><span class=errors>&gt;&gt;</span></cfif>
				      <td width=280 class=label>#say('region')#(s):</td>
							  <td width=300 id="colRegion">
								  <cf_dblistbox
									  datasource="#application.DSN#"
										query="SELECT region as value,description AS label
										FROM SRM_region
										WHERE 1=1 and province!=''
										ORDER BY region "
										default="#region#"	
										selectattr='class=small name="region" size=4 multiple'>
								</td>			
				    </tr>								
					</table>
				</div> <!--- systemRegion --->
				
				<div id="date">
				  <table border=1>									
				    <tr>
					    <td colspan=2><input type="checkbox" name="cb_Role" value=1 id="cb_Role" onclick="enableDates()">Act as another role for a period of time<br></td>
				    </tr>
				    <tr>
					    <cfif isdefined("formerrors.act_startdate")><span class=errors>&gt;&gt;</span></cfif>
				      <cfset ico.cal = '<img alt="Calendar" border=0 height=13 width=13 src="#application.IMAGEDIR#/icons/calendar.gif">'>
					    <td width=280 class="label"> Start Date:</td>
					    <td>
						    <input type="text" id="txtStartDate" name="act_startdate" size="13" disabled> 
						    <!--<a href="javascript: date(document.entryform.sendate);"><img alt="Calendar" border=0 height=13 width=13 src="/srm/images/icons/calendar.gif"></a>		 -->
						    <!--<a href="javascript: void(0)">I am a useless link</a>-->
						    <a id="startDateID" href="javascript: date(document.entryform.act_startdate);">#ico.cal#</a>
						    <!--<a href="http://example.com" onclick="this.removeAttribute('href');this.className='disabled'"></a><img alt="Calendar" border=0 height=13 width=13 src="/srm/images/icons/calendar.gif"></a>		 -->
					    </td>		
				    </tr>	
				    <tr>
					    <cfif isdefined("formerrors.act_enddate")><span class=errors>&gt;&gt;</span></cfif>
					    <td width=280 class="label"> End Date:</td>
					    <td>
						    <input  type="text" id="txtEndDate" name="act_enddate" size="13" disabled>	
						    <a id="endDateID" href="javascript: date(document.entryform.act_enddate);">#ico.cal#</a>
						    <!--<a href="http://example.com"><img alt="Calendar" border=0 height=13 width=13 src="/srm/images/icons/calendar.gif"></a>-->
					    </td>    			     
				    </tr>
			    </table>     							
				</div> <!--- date --->
				
				
			</form>
		</body>