How to remove required attribute in HTML after selecting checkbox

Question

I have a function which, after choosing Approve / Reject, hides or shows certain sections of the DIV.

        jQ('[id^="hrApproval"]').on('change', function(){
            //this get the value of the field that was changed
            thisPointer.entity.setValue(jQ(this).attr('id'), jQ(this).val());
            //this forces a save of that value to the field
            thisPointer.entity.mergeLocal(true);
            var hrApprovalValue = thisPointer.entity.getValue('hrApproval');

            if(hrApprovalValue == "Approve"){
                jQ('[id="section_requestInformationMulltiply"]').closest("div").show();
                jQ('[id="section_requestInformation_Single"]').closest("div").hide();
                jQ('[id="section_requestInformation_Single"]').closest("div").removeAttr('required');
            }else if(hrApprovalValue == "Reject"){
                jQ('[id="section_requestInformationMulltiply"]').closest("div").hide();
                jQ('[id="section_requestInformation_Single"]').closest("div").show();
                jQ('[id="section_requestInformation_Single"]').closest("div").removeAttr('required');
            }else{
                jQ('[id="section_requestInformation_All"]').closest("div").show();
                jQ('[id="section_requestInformation_All"]').closest("div").show();
            }
        });

HTML CHECKBOX

                <fieldset>
                    <div class="row gutters">
                        <div class="col col-3"><label data-timtranslationlabel="HpreviousContractAvailable" for="previousContractAvailable">Application for a group of companies?</label></div>
                        <input type="radio" id="hrApproval_Approve" name="hrApproval" value="Approve" /><label data-timtranslationlabel="Hyes" for="hrApprover_Yes" class="checkbox">Yes</label>&#160;&#160;&#160;&#160;&#160;
                        <input type="radio" id="hrApproval_Reject" name="hrApproval" value="Reject" /><label data-timtranslationlabel="Hno" for="hrApprover_No" class="checkbox">No</label>&#160;&#160;&#160;&#160;&#160;
                    </div>
                </fieldset>

HTML SOME PART

    <div class="section" id="section_requestInformation_Single" style="display: none">
        <div id="tabGC" class="tabDiv">
            <div class="row gutters">
                <div class="col col-12">
                <fieldset>
                    <legend data-timtranslationlabel="">Customer information</legend>
                    <div class="row gutters">
                        <div class="col col-1">                         
                            <label data-timtranslationlabel="" for="deregistration_dateEffectiveOrder">Customer Name</label>
                            </div>      
                        <div class="col col-1">
                            <input type="text" maxlength="4000" name="deregistration_codeword" id="deregistration_codeword" class="small" required ="true" />
                            </div>  

I wanted to remove required = "true" from a given DIV ID after selecting Approve. For example when i chose hrApprovalValue = Approve remove from jQ('[id="section_requestInformation_Single"]') required = "true".

I tried add .removeAttr('required') but its not working