By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,968 Members | 1,843 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,968 IT Pros & Developers. It's quick & easy.

Select box options to disable/enable checkbox?

P: n/a
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>

Jan 18 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
bigrich wrote:
<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.
</form>


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
Jan 18 '06 #2

P: n/a

"bigrich" <bi*****@gmail.com> wrote in message
news:11*********************@f14g2000cwb.googlegro ups.com...
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>

Jan 18 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.