Enable or disable dropdowns based on selected value in other dropdown using javascript

Question

I want to remove an attribute from an element when I pick the Student option from a drop-down list. If I choose Teacher, or Staff, the course and year level will disable, but if I choose Student, it will enable thanks for your response.

HTML:

<div class="control-group">
    <label class="control-label" for="inputPassword">Type:</label>
    <div class="controls">
        <select name="type" id="type" required>
            <option></option>
            <option>Student</option>
            <option>Teacher</option>
            <option>Staff</option>
            <option></option>
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputPassword">Course Type:</label>
    <div class="controls">
        <select name="course" id="course" required>
            <option></option>
            <option>BSIT</option>
            <option>BSCS</option>
            <option>BSHRM</option>
            <option>BSBM</option>
            <option>BSTM</option>
            <option>COE</option>
            <option></option>                                   
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputPassword">Year Level:</label>
    <div class="controls">
        <select name="year_level" id="year_level">
            <option> </option>
            <option>First Year</option>
            <option>Second Year</option>
            <option>Third Year</option>
            <option>Fourth Year</option>    
        </select>
    </div>
</div>

This is the JavaScript:

<script>    
    document.getElementById('type').onchange = function () {  
        var obj = document.getElementById('course').setAttribute('disabled',this.value=='Student');

        document.getElementById('course').setAttribute('disabled',this.value=='Teacher');
        document.getElementById('year_level').setAttribute('disabled',this.value=='Teacher');

        obj.setAttribute('disabled');
        obj.removeAttribute('disabled');
    }    
</script>

Drop-down: drop-down print-screen.

Example: https://jsfiddle.net/dzpr46d4/

Rahul Gupta · Accepted Answer · 2017-07-25 05:35:43Z

3

To again enable the dropdowns, you need to remove the disabled attribute, using below code:

document.getElementById('course').removeAttribute('disabled');

I have edited your JSFIDDLE DEMO. Here is the code:

     document.getElementById('type').onchange = function () {
     alert("selected value = "+this.value);
     if(this.value == "Student")
     {
            document.getElementById('course').removeAttribute('disabled');
document.getElementById('year_level').removeAttribute('disabled');

     }
     else
     {
            document.getElementById('course').setAttribute('disabled', true);
                    document.getElementById('year_level').setAttribute('disabled', true);

     }
      }

answered Jul 25, 2017 at 5:35

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ameri Ichinose Over a year ago

you did great!! Thank you so much my friend!!! that 5 hours I spent for this code, you solve it like 1minute thank you!

Ameri Ichinose Over a year ago

It says "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score." sorry I'm just a new here just created this account 30mins ago, I will up you for sure thank you

Collectives™ on Stack Overflow

Enable or disable dropdowns based on selected value in other dropdown using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related