CODEWITHSUNDEEP
javascripthtmlhtml-selectdisabled-input
Ameri Ichinose
Ameri Ichinose

Reputation: 33

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

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/

Upvotes: 1

Views: 3367

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10131

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);

     }
      }

Upvotes: 3

Related Questions