Select box options to disable/enable checkbox?

Discussion in 'Javascript' started by bigrich, Jan 18, 2006.

  1. bigrich

    bigrich Guest

    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>
     
    bigrich, Jan 18, 2006
    #1
    1. Advertising

  2. 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
     
    Thomas 'PointedEars' Lahn, Jan 18, 2006
    #2
    1. Advertising

  3. bigrich

    Sean Berry Guest

    "bigrich" <> wrote in message
    news:...
    > 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>
     
    Sean Berry, Jan 18, 2006
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    585
  2. mark
    Replies:
    0
    Views:
    1,361
  3. palmiere
    Replies:
    1
    Views:
    413
    Erwin Moller
    Feb 9, 2004
  4. John
    Replies:
    7
    Views:
    160
    Richard Cornford
    Sep 11, 2005
  5. Kevin
    Replies:
    2
    Views:
    261
Loading...

Share This Page