javascript disable multiselect box based on selections in another multiselect box - php

Question

I have two multi select boxes one for country list and one for state list
<select multiple="multiple" name="country[]" id="country" >
<option value="0">Select a Country</option>
<?php
foreach($country_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['Country Name']==$key|| $row['Country Name']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select>
<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select>
I have this javascript which enables the state box when the country selected is USA.
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
But, I want the state box to be disabled when other countries are selected along with USA in the first one.
Any suggestions please? Thanks

Answer 1

Demo: http://jsfiddle.net/eBTgb/
$("#country").on("click change", function(){
var option_usa = $("option[value=6]", this);
if (option_usa.is(":selected") && option_usa.siblings(":selected").length == 0) {
$("#state").removeAttr("disabled");
}
else {
$("#state").attr("disabled", "disabled");
}
});
I hope understand you correctly.

Answer 2

This can be done using JQuery.
$("#state").hide();
$("#country").change( function () {
var countryName = $("#country").find("option:selected").html();
if(countryName == 'USA'){
$("#state").show();
} else {
$("#state").hide();
}
});
Heres the link to the JSFIDDLE