I am utilizing the code snippet below to display a div and disable certain input values based on selection changes. The choices are Approval, Request, and Change. I suspect there is an issue with the third set of form options in my code. How can I modify it to disable inactive options? What could be causing errors in my script?
var Permissions = jQuery('#privileges');
var select = this.value;
Permissions.change(function() {
if (jQuery(this).val() == 'approval') {
jQuery('.approval').show();
jQuery('#requesttype').prop('disabled', true);
jQuery('#requestpurpose').prop('disabled', true);
jQuery('#busformdoc4').prop('disabled', true);
jQuery('#busformdoc3').prop('disabled', true);
jQuery('#requestsendit').prop('disabled', true);
} else jQuery('.approval').hide();
if (jQuery(this).val() == 'request') {
jQuery('.request').show();
jQuery('#approvaltype').prop('disabled', true);
jQuery('#where').prop('disabled', true);
jQuery('#busformdoc1').prop('disabled', true);
jQuery('#busformdoc2').prop('disabled', true);
jQuery('#approvalsendit').prop('disabled', true);
} else jQuery('.request').hide();
if (jQuery(this).val() == 'change') {
jQuery('.change').show();
jQuery('#changes').prop('disabled', true);
jQuery('#busformdoc5').prop('disabled', true);
jQuery('#busformdoc6').prop('disabled', true);
jQuery('#changesendit').prop('disabled', true);
} else jQuery('.change').hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select name="permissions" id="privileges" class="">
<option disabled selected>– Select your request type –</option>
<option id="approval" value="approval">Approval Required</option>
<option id="request" value="request">Request for Design</option>
<option id="change" value="change">Change Artwork Request</option>
</select>
</div>
<div class="approval" style=" display: none;">
<select name="type" id="approvaltype" required>
<option disabled selected>– Type –</option>
<option value="1">1</option>
</select>
<textarea name="where" id="where" title="Purpose" required></textarea>
<input type="file" name="busformdoc1" id="busformdoc1">
<input type="file" name="busformdoc2" id="busformdoc2">
<input name="sendit" id="approvalsendit" type="submit" value="Send Approval Request" />
</div>
<div class="request" style=" display: none;">
<select name="type" id="requesttype" required>
<option disabled selected>– Type –</option>
<option value="1">1</option>
</select>
<textarea name="purpose" id="requestpurpose" title="purpose" required></textarea>
<input type="file" name="busformdoc3" id="busformdoc3" >
<input type="file" name="busformdoc4" id="busformdoc4" >
<input name="sendit" id="requestsendit" type="submit" value="Send Artwork Request" />
</div>
<div class="change" style=" display: none;">
<textarea name="changes" id="changes" title="Changes" required></textarea>
<input type="file" name="busformdoc5" id="busformdoc5" >
<input type="file" name="busformdoc6" id="busformdoc6" >
<input name="sendit" type="submit" value="Send Change Request" class="btn" />
</div>