Link to home
Start Free TrialLog in
Avatar of SevenAteAnthony
SevenAteAnthonyFlag for United States of America

asked on

If Selects Have Value, Then Change Disabled State of Checkbox

Hi Experts,

Thanks for reading. I have two selects and a checkbox. The checkbox is disabled on load. I want to make the checkbox enabled if there is a value selected in each of the selects. I've written the following JavaScript:

<script type="text/javascript">
    $(document).load(function(){
        var classroomHasValue = $('#classroom').has('[selected]');
        var buildingHasValue = $('#building').has('[selected]');
        var experience = document.getElementById('experience');
        if(classroomHasValue && buildingHasValue){
            experience.disabled = true;
        }
        else{
            experience.disabled = false;
        }
    });
    </script>

Open in new window


It does not work as expected, unfortunately. My HTML is as follows:

<div class="controls">
    Classroom: 
    <select id="classroom">
        <option value="">Select...</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<div class="controls">
    Building: 
    <select id="building">
        <option value="">Select...</option>
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
</div>
<div class="controls">
    Experience: <input type="checkbox" id="experience" value="1" disabled />
</div>

Open in new window


Any thoughts, feedback, or suggestions? Thank you!
ASKER CERTIFIED SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SevenAteAnthony

ASKER

Thank you. I need to learn the initial function calls it seems.