Home/ Questions/Q 7720075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:34:23+00:00

I have a DropDownList that asks the user if he want to join the

  • 0

I have a DropDownList that asks the user if he want to join the club:

Do you want to join the club
Yes
No

Under this list there is another list that is set to disabled as a default. This list has the departments of the club. This list will not be enabled until the user chooses Yes.

I built the following code but the problem that I couldn’t solve is let’s assume the user chooses Yes then he changes his decision so he will choose No again. In this case the list of the departments still enabled. I want it to be disabled when he chooses No again.

<html>
    <head>
        <script type="text/javascript">
            function disable()
            {
                document.getElementById("mySelect1").disabled=true;
            }
            function enable()
            {
                document.getElementById("mySelect1").disabled=false;
            }
        </script>
    </head>
    <body>
        <form>
            <select id="mySelect" onChange="enable();">
                <option onSelect="disable();">No</option>
                <option onSelect="enable();">Yes</option>
            </select>
            <select id="mySelect1" disabled="disabled" >
                <option>Dep1</option>
                <option>Dep2</option>
                <option>Dep3</option>
                <option>Dep4</option>
            </select>
        </form>
    </body>
</html>

I thought that onSelect="disable();" would solve the problem but it still doesn’t work.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d do it like this jsFiddle example.

    JavaScript:

    function check(elem) {
    document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}

    HTML:

    <form>
    <select id="mySelect" onChange="check(this);">
        <option>No</option>
        <option>Yes</option>
    </select>

    <select id="mySelect1" disabled="disabled" >
        <option>Dep1</option>
        <option>Dep2</option>
        <option>Dep3</option>
        <option>Dep4</option>
    </select>
</form>
    • 0