Menu
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.
[code=html]<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>>></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>
<!–<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>>></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>