how to disable and enable form field based on the value of another field

how to disable and enable form field based on the value of another field

I have three drop down lists that are dependent on one another




<select class="form-control" id="StatusId" name="StatusId">
 <option value=""> </option>
<option value="1">Pending</option>
<option value="2">Approved</option>
<option value="3">Declined</option>
</select>


<select class="form-control" id="DeclineReasonId" name="DeclineReasonId">
 <option value=""> </option>
<option value="1">Incomplete Documentation</option>
<option value="2">Too many loans</option>
<option value="3">Fraudulent Intents</option>
</select>

<select class="form-control" id="PendingReasonsId" name="PendingReasonsId">
 <option value=""> </option>
<option value="1">With Undewriter</option>
<option value="2">Incomplete Document</option>
<option value="3">Client is yet to decide</option>
</select>

 if i choose "Pending", "DeclineReasonId" should be disabled . if i choose "Declined", "PendingReasonsId" should be disabled. if i choose "Approved", Both DeclineReasonId and PendingReasonsId should be disabled.

If after choosing any of the three and before submitting i decide to change the StatusId, I want it to be able to adjust such that

If i change from Pending to Declined - PendingReasonsId should be disabled and DeclineReasonId should be enabled if i change from Pending to Approved - PendingReasonsId and DeclineReasonsId should be disabled

if i change from Declined to Pending - DeclineReasonId should be disabled and PendingReasonsId be enabled if i change form Declined to Approved - Both DeclineReasonId and PendingReasonsId be disabled

if i change from Approved to Pending - PendingReasonsId should be enabled and DeclineReasonsId be disabled if i change from Approved to Declined - DeclinedReasonId should be enabled and PendingReasonId be left in Disabled state.

Please help?