CODEWITHSUNDEEP
javascripthtml
charlie
charlie

Reputation: 1384

Javascript disable select box on another select box option

I have two select dropdown lists:

<select name="internal_message">
<option value="yes">Yes</option>
<option value="" selected="selected">No</option>
</select>

and

<select name="internal_message_agent">
<option value="">Choose</option>.... etc
</select>

I have tried:

<select name="internal_message">
            <option value="yes" onClick="document.getElementById('internal_message_agent').disabled=!this.selected;">Yes</option>
            <option value="" selected="selected">No</option>
            </select>

but it doesnt work - how can i get it working to disable the internal_message_agent select element to be disabled when the internal_message selected value is "No" and enable it when the selected option is "Yes"

Upvotes: 1

Views: 3332

Answers (2)

usernolongerregistered
usernolongerregistered

Reputation: 390

Here's what it would look like with Javascript and HTML.

<!DOCTYPE html>
<html>
<head>
</head>
<script>
function validate(){
    var b1 = document.getElementById("box1");
    var f = b1.options[b1.selectedIndex].value;
    var b2 = document.getElementById("box2");
        if(f == "no"){
        b2.disabled="disabled";
        }
    else{
    b2.disabled="";
    }
}
</script>
<select id="box1" onchange="validate()">
    <option id="yes" value="yes">Yes</option>
    <option id="no" value="no" selected="selected">No</option>
</select>

<select id="box2" disabled>
    <option></option>
    <option value="">Choose</option>
</select>
</html>

Upvotes: 0

ldmo
ldmo

Reputation: 379

Add an ID to each select and use jquery to disable it like so:

$('#box1').on('change', function(){
if($(this).val()==='no'){
    $('#box2').attr('disabled', 'disabled');
}else{
    $('#box2').attr('disabled', false);
}
});

http://jsfiddle.net/3MCaG/1/

Upvotes: 4

Related Questions