Dear SF experts,
I have a drop down option in my visualforce page where the 'onchange' event calls a jQuery function called 'selectMapping()' that renders the appropriate outputpanel. There was a reason for using the onchange to trigger a jQuery function as opposed to using the native 'actionSupport' function along with the 'rerender' option in visualforce. It was because of performance issues due to the high viewstate size and took forever to re-render different sections of the page using the native approach.

However, an issue with the current implementation is that when clicking on 'save', even though the unused outputpanel is hidden from the page, the inputfields from the hidden outputpanel show a validation error, complaining an input is required. So I have tried disabling hidden inputfields to skip the validation on required fields, but had no luck.
I have tried the option of setting "immediate=true" on the save button, but this has caused some inputfields to be null.

Any help would be appreciated! 
 

<apex:pageBlockButtons location="bottom">
    <apex:commandButton value="Save" action="{!save}"/>
</apex:pageBlockButtons>

<apex:pageBlockSection columns="1">
    <apex:selectList id="chooseMappingOption" size="1" onchange="selectMapping()" label="Choose Option" multiselect="false">
        <apex:selectOption itemValue="MappingPanelAccountOnly" itemLabel="Map to Account Only" />
        <apex:selectOption itemValue="MappingPanelAccountBrand" itemLabel="Map to Account and Brand" />
    </apex:selectList>
</apex:pageBlockSection>

<apex:outputPanel id="MappingPanelAccountOnly">
    <apex:outputPanel>
        <apex:pageBlockSection columns="1">
            <apex:inputField label="Account Name" value="{!account.name}" id="accNameForAccOnly" />
        </apex:pageBlockSection>
        <apex:pageBlockSection columns="1">
            <apex:inputField label="Person Name" value="{!account.Person__c}" id="personNameForAccOnly" />
        </apex:pageBlockSection>
    </apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id="MappingPanelAccountBrand">
    <apex:inputField value="{!accBrandJunc.Account__c}" id="accNameForAccBrand" >
    ...
</apex:outputPanel>

<script type="text/javascript">
    j$('[id$=MappingPanelAccountBrand]').hide();

    function selectMapping() {
        if (j$('[id$=chooseMappingOption]').val() == "MappingPanelAccountOnly") {
            
            // Hide irrelevant fields
            j$('[id$=MappingPanelAccountBrand]').hide();

            // Disable hidden input fields
            j$('[id$=accNameForAccBrand]').prop('disabled', true);
            j$('[id$=brandNameForAccBrand]').prop('disabled', true);
            j$('[id$=personNameForAccBrand]').prop('disabled', true);
            
            // Show fields
            j$('[id$=MappingPanelAccountOnly]').show();
            j$('[id$=isAccountBrand]').val(false);
        } else {
            ...
        }
    }
</script>