Cannot disable listbox in Firefox when checkbox is checked - html

Question

I need to disable 2 listboxes 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.
<cfif isdefined("formerrors.sameas_empid")><span class=errors>>></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>>></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>>></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 --->
When the checkbox is checked, it will call the javascript function, disableSystemRegion()
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.
<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')#
#say('return_to_srm')#
</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>>></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>>></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>>></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>>></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>>></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>>></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>>></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>>></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>>></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>
<!--<img alt="Calendar" border=0 height=13 width=13 src="/srm/images/icons/calendar.gif"> -->
<!--I am a useless link-->
<a id="startDateID" href="javascript: date(document.entryform.act_startdate);">#ico.cal#</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>>></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>
<!--<img alt="Calendar" border=0 height=13 width=13 src="/srm/images/icons/calendar.gif">-->
</td>
</tr>
</table>
</div> <!--- date --->
<div id="comments">
<p class=section>#say('comments_and_special_instructions')#</p>
<ul class="body">
<!--<div id="divnewaccess4" style="display:none">-->
<div id="divnewaccess4">
<li>#say('systems_and_regions')#?
<li>#say('duties_and_dep')#?
</div>
<!--<div width=200 id="divneedmore2" style="display:none">-->
<div width=200 id="divneedmore2">
<li>Need Access for particular function, please specify name of function or function ID.</li>
<li>If Job duties,department or Profile changed, please specify old and new both responsibilities.</li>
</div>
<li>#say('additional_details')#.
</ul>
<cfif isdefined("formerrors.comments")><span class=errors valign=top>>></span><br></cfif>
</div> <!--- comments --->
<div id="textarea">
<textarea name="comments" cols=60 rows=5>#htmlEditFormat(comments)#</textarea>
<input type="submit" value="#say('submit')#">
<input onClick="document.location.href = '#application.WWWROOT#/';" type="button" value="#say('cancel')#">
<input type="hidden" name="accesstypehidden" id="accesstypehidden" value="#accesstypehidden#">
</div> <!--- textarea --->
</form>
</body>

Answer 1

The problem is that colSystem and colRegion are the ids of table cells, and not the ids of the controls you want to disable. So, you make the entire table cell disabled.
<td width=300 id="colSystem">
While IE behaves differently, FF and Chrome do not make elements disabled if parent is disabled.
Check out this small example in FF and IE, you will notice the difference:
http://jsfiddle.net/3BmKc/