Disable dropdownlist based on first dropdownlist in jquery - php

Question

Can anyone give me an example how to disable dropdown list? What I want is when user choose Coaches and Mentoring or Others, second and third dropdown list will disable. Thank you for your help.
<tr>
<td>Action</td>
<td><select name = "TTID1" id="TTID1" style="width:250px" onchange="otherAction(this.value)">
<option value="O"></option>
<option value="600">Classroom Training</option>
<option value="601">Coaches and Mentoring by IM</option>
<option value="602">On Job Training</option>
<option value="9999">Others</option>
</select></td>
<td>Proposed Training in ILSAS</td>
<td><select name = "trainGroup1" id="trainGroup1" style="width:250px" onchange="otherIlsas(this.value)">
<option value="O"></option>
<option value="700">Power Engineering & Energy Training</option>
<option value="701">Management Training</option>
<option value="702">IT & Corporate System Training</option>
<option value="703">Business Operation Tools Certification</option>
<option value="9999">Others</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><?php
$qry="SELECT trainID, trainText FROM tbltraininglist order by traintext asc";
$result=mysql_query($qry);
echo "<select name = 'trainID1' id='trainID1' style='width:250px' )'>";
echo "<option value ='null'></option>";
while ($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row['trainID']; ?>"><?php echo $row['trainText']; ?> </option>
<?php
}
?>
</select></td>

Answer 1

<script type="text/javascript">
$(document).ready(function() {
$('#TTID1').change(function() {
if($(this).val() == "601" || $(this).val() == "9999")
{
$('#trainGroup1').prop('disabled', true);
}
else
{
$('#trainGroup1').prop('disabled', false);
}
});
});
</script>
Here is a super basic answer using the onchange event. Making it more dynamic and tweaking it for properly resetting your select fields I'll leave up to you to customise. :)

Answer 2

Try this simple example like below :
$('#TTID1').on('change', function(){
if ( $(this).val() == 601 || $(this).val() == 9999 ) {
$('#trainGroup1 option[value="700"], #trainGroup1 option[value="701"]').prop('disabled', true);
} else {
$('#trainGroup1').find('option').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>Action</td>
<td><select name = "TTID1" id="TTID1" style="width:250px">
<option value="O"></option>
<option value="600">Classroom Training</option>
<option value="601">Coaches and Mentoring by IM</option>
<option value="602">On Job Training</option>
<option value="9999">Others</option>
</select></td>
<td>Proposed Training in ILSAS</td>
<td><select name = "trainGroup1" id="trainGroup1" style="width:250px">
<option value="O"></option>
<option value="700">Power Engineering & Energy Training</option>
<option value="701">Management Training</option>
<option value="702">IT & Corporate System Training</option>
<option value="703">Business Operation Tools Certification</option>
<option value="9999">Others</option>
</select></td>