Disabling fields based on a checkbox.

[ML.Steve]

Hi,

There are lots of posts on this subject but after a couple of hours of
going though them I still can't get a number of fields to be disabled
when a checkbox is ticked. Basically I have a lot of Forecast and
Actual dates that can be entered, and next to each one an 'NA' checkbox
that I want to disable/grey-out both dates (and the JavaScript calendar
if possible). It also only has to work on Internet Explorer 6, as it
is for internal use only.

Any help greatly welcome as this is starting to drive me mad.

Code extract of form below.

Thanks,

Steve

<form name="lform" method="get" action="UpdateDB.asp">
[...]
<tr>
<td><b>Forecast1:</b> <input type="text" name="Forecast1" id="Date14"
size="10" maxlength="10" value="<%=ForeCast1%>">
<img src="/images/icons/calendar.gif" id="Trig14" style="cursor:
pointer; border: 1px solid red;" title="Date selector"></td>

<td><b>Actual1:</b> <input type="text" name="Actual1" id="Date15"
size="10" maxlength="10" value="<%=Actual1%>">
<img src="/images/icons/calendar.gif" id="Trig15" style="cursor:
pointer; border: 1px solid red;" title="Date selector">/</td>

<td><input type="checkbox" NAME="NA1" VALUE=1> N/A</td>
</tr>
[...]
</form>

 

[Thomas 'PointedEars' Lahn]

There are lots of posts on this subject but after a couple of hours of
going though them I still can't get a number of fields to be disabled
when a checkbox is ticked.

What exactly have you not understood? What have you tried? What failed
with which error?

Basically I have a lot of Forecast and
Actual dates that can be entered, and next to each one an 'NA' checkbox
that I want to disable/grey-out both dates (and the JavaScript calendar
if possible).

Why, you just need to disable either both elements or their parent
`fieldset' element when the checkbox was clicked and is checked.

Any help greatly welcome as this is starting to drive me mad.

If I could *see* efforts on your part, I would gladly provide further help.

Code extract of form below.

There is not one line of JS/ECMAScript, so I have to doubt you have even
tried, let alone understood what you are doing.

<http://jibbering.com/faq/>


PointedEars

 

[RobG]

Hi,

There are lots of posts on this subject but after a couple of hours of
going though them I still can't get a number of fields to be disabled
when a checkbox is ticked. Basically I have a lot of Forecast and
Actual dates that can be entered, and next to each one an 'NA' checkbox
that I want to disable/grey-out both dates (and the JavaScript calendar
if possible). It also only has to work on Internet Explorer 6, as it
is for internal use only.

Any help greatly welcome as this is starting to drive me mad.

Here's an example that should get you going:

<script type="text/javascript">

function disableControls(el)
{
var num = el.name.replace(/\D/g,'');
var form = el.form;
form['Forecast'+num].disabled = el.checked;
form['Actual'+num].disabled = el.checked;
}

</script>

<form name="lform" method="get" action="UpdateDB.asp">
<table border="1">
<tr>
<td><b>Forecast1:</b>
<input type="text" name="Forecast1"></td>
<td><b>Actual1:</b>
<input type="text" name="Actual1"></td>
<td><input type="checkbox" NAME="NA1"
onclick="disableControls(this);"> N/A</td>
</tr>
</table>
</form>


The trick is keep the number part of name of related controls the same.
If you wanted to get more complex, you could create an object that has
the name of the checkbox and the names of the controls to
enable/disable, like:


var relatedControls = {
'NA1' : ['Actual1','Forecast1'],
'NA2' : ['Actual2','Forecast2']
};


Then the function could do something like:

function toggleDisabled(el)
{
var form = el.form;
var controlNames = relatedControls[el.name];
var isChecked = el.checked;
var i = controlNames.length;
while (i--){
form[controlNames].disabled = isChecked;
}
}

That way each checkbox could enable/disable any number of controls.

 

[Thomas 'PointedEars' Lahn]

var num = el.name.replace(/\D/g,'');

More efficient is always:

var num = el.name.replace(/\D+/g, '');


PointedEars

 

[RobG]

RobG wrote:




More efficient is always:

var num = el.name.replace(/\D+/g, '');

or perhaps:

var num = el.name.replace(/^\w+/g,'');

I'd rather use hyphenated names and split so that the 'key' is explicit
and can contain any valid name characters (other than hyphen of course),
but there you go.

 

[ML.Steve]

Thanks for the replies;

The actual names of the fields are pretty long and detail what the date
field actually is, so looping is not an option. I have however got it
working from another post here, that I had tried before but didn't
work, but did a second time. The bit I am looking at now is disabling
the calendars, which I am completed stumped on. It would be great if I
could swap the calendar image for a disabled greyed out version which
didn't bring up the calendar.

<script language="JavaScript" type="text/JavaScript">
function enableDisable(CheckBoxID, FieldID1, FieldID2){
document.getElementById(FieldID1).disabled = (CheckBoxID.checked);
document.getElementById(FieldID2).disabled = (CheckBoxID.checked);
return true;
}

[...]

<td><b>Forecast:</b> <input type="text"
name="DrawingsApprovedforAcqAndPlanForecast" id="Date14" size="10"
maxlength="10" value="<%=DrawingsApprovedforAcqAndPlanForecast%>">
<img src="/images/icons/calendar.gif" id="Trig14" style="cursor:
pointer; border: 1px solid red;" title="Date selector"></td>
<td><b>Actual:</b> <input type="text"
name="DrawingsApprovedforAcqAndPlan" id="Date15" size="10"
maxlength="10" value="<%=DrawingsApprovedforAcqAndPlan%>">
<img src="/images/icons/calendar.gif" id="Trig15" style="cursor:
pointer; border: 1px solid red;" title="Date selector"></td>
<td><input type="checkbox" NAME="DrawingsApprovedforAcqAndPlanNA" <% If
DrawingsApprovedforAcqAndPlanNA=1 Then%> CHECKED <% End If %>
onClick="return enableDisable(this, 'Date14', 'Date15');"
id="DrawingsApprovedforAcqAndPlanNA"> N/A</td>

[...]

<script type="text/javascript">

var NoOfCalendars=15;
for(var count=1; count<=NoOfCalendars; count=count+1 )
{
Calendar.setup(
{
inputField : "Date" + count,
button : "Trig" + count
}
)
}
</script>

 

[Thomas 'PointedEars' Lahn]

More efficient is always:

var num = el.name.replace(/\D+/g, '');

or perhaps:

var num = el.name.replace(/^\w+/g,'');

I'd rather use hyphenated names and split so that the 'key'
is explicit [...]

With leading hyphen, I suppose, since /\w+/ does not match it.


PointedEars