Select box options to disable/enable checkbox?

B

bigrich

I'm a beginner to javascript and need help. I've searched the forum but
can't piece the answer together.

I need to be able to uncheck and disable a checkbox based on the option
selected in a Select list.

This is what I tried. Any help is appreciated.
==============
<script type="text/javascript">
function GetOptVal(OptVal)
var OptVal;
{
if(OptVal="XX") document.form1.chkbox1.disabled = false;
}
else
{
document.form1.chkbox1.checked = false;
document.form1.chkbox1.disabled = true;
}
</script>

<form name="form1">

<select name="Opt1"
onchange=GetOptVal(document.form1.Opt1[document.form1.Opt1.selectedIndex].value)>
<option value=" ">Select One</option>
<option value="XX">XX</option>
<option value="YY">YY</option>
<option value="ZZ">ZZ</option>
</select>

<input type="checkbox" name="chkbox1" />
</form>
 
T

Thomas 'PointedEars' Lahn

bigrich said:
<script type="text/javascript">
function GetOptVal(OptVal)
var OptVal;
{
^
Fantasy syntax. It has to be

function /identifier/(/comma-separated list of named arguments/)
{

where the /.../ parts are to be replaced with meaningful code.

Local variables are created automatically for named arguments;
redeclaring them with a `var' statement is definitely harmful.
if(OptVal="XX") document.form1.chkbox1.disabled = false;
^[1] ^^^^^^^^^^^^^^^^^^^^^^[2]
[1] The `=' operator specifies an assignment always.
You are looking for `==' (type-converting equals)
or `===' (strict equals).
^
Nesting error. If you would have indented the blocks, being a sign
of good code style in any structured programming language, you would
have noticed.
else
{
document.form1.chkbox1.checked = false; ^^^^^^^^^^^^^^^^^^^^^^[2]
document.form1.chkbox1.disabled = true;
^^^^^^^^^^^^^^^^^^^^^^[2]

[2] Avoid obtaining the reference to the same object repeatedly.
It is inefficient regarding runtime and maintenance.
</script>

<form name="form1">

<select name="Opt1"
onchange=GetOptVal(document.form1.Opt1
^ [1]^^^^^^^^^^^^^^^^^^^^[1]

[1] Attribute values that contain certain characters, such as "(",
must be delimited with in single (') or double (") quotes.
Therefore you should quote attribute values always.

[2] The element object that fired the event can be referred with
`this' in event handler attribute values.
[document.form1.Opt1.selectedIndex].value)> ^
<option value=" ">Select One</option>
<option value="XX">XX</option>
<option value="YY">YY</option>
<option value="ZZ">ZZ</option>
</select>

<input type="checkbox" name="chkbox1" />
^
This is X(HT)ML syntax, however you write HTML (as can be inferred
from your `script' element's content). So omit the forward slash.

Probably you are looking for something like this:

<script type="text/javascript">
function enableDisable(o, sName, b)
{
var o = o.form.elements[sName];
if (o)
{
// the specified control will enabled and checked,
// or disabled and unchecked
o.disabled = !b;
o.checked = b;
}
}
</script>

<form action="" ...>
<select name="Opt1"
onchange=
"enableDisable(this, 'chkbox1', this[this.selectedIndex].value == 'XX');">
<option value="    ">Select One</option>
<option value="XX">XX</option>
<option value="YY">YY</option>
<option value="ZZ">ZZ</option>
</select>
<input type="checkbox" name="chkbox1">
</form>

Please adhere to the FAQ <URL:http://jibbering.com/faq/>,
especially <URL:http://jibbering.com/faq/#FAQ4_43>, next time.


PointedEars
 
S

Sean Berry

bigrich said:
I'm a beginner to javascript and need help. I've searched the forum but
can't piece the answer together.

I need to be able to uncheck and disable a checkbox based on the option
selected in a Select list.

This is what I tried. Any help is appreciated.
==============
<script type="text/javascript">
function GetOptVal(OptVal)
var OptVal;
{
if(OptVal="XX") document.form1.chkbox1.disabled = false;
}
else
{
document.form1.chkbox1.checked = false;
document.form1.chkbox1.disabled = true;
}
</script>

<form name="form1">

<select name="Opt1"
onchange=GetOptVal(document.form1.Opt1[document.form1.Opt1.selectedIndex].value)>
<option value=" ">Select One</option>
<option value="XX">XX</option>
<option value="YY">YY</option>
<option value="ZZ">ZZ</option>
</select>

<input type="checkbox" name="chkbox1" />
</form>


Several errors here:

1. 1st { should come after "function GetOptVal(OptVal)"
2. onchange needs quotes
3. if(OptVal="XX") should be using == instead of =

I would change it like so:

<script type="text/javascript">
var OptVal;
function GetOptVal(OptVal) {
chkbox = document.form1.chkbox1;
if(OptVal=="XX") chkbox = false;
else {
chkbox1.checked = false;
chkbox1.disabled = true;
}
}
</script>

<form name="form1">

<select name="Opt1"
onchange="GetOptVal(document.form1.Opt1[document.form1.Opt1.selectedIndex].value);">
<option value=" ">Select One</option>
<option value="XX">XX</option>
<option value="YY">YY</option>
<option value="ZZ">ZZ</option>
</select>

<input type="checkbox" name="chkbox1" />
</form>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Staff online

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top