Make SharePoint Online list columns read only based on yes/no checkbox

[Sam1209]

I have 7 columns that I need to make Read Only (greyed out) as soon as the item is saved when "Field 7" is ticked (yes/no checkbox column).

I have managed to make these 7 columns read only using the following Javascript, however I am struggling with the IF statement. Any help would be appreciated.

<script>
// A $( document ).ready() block.
$( document ).ready(function() {
    jQuery("input[title='Field 1']").attr("disabled", "disabled"); 
    jQuery("input[title='Field 2']").attr("disabled", "disabled");
    jQuery("input[title='Field 3']").attr("disabled", "disabled");
    jQuery("input[title='Field 4']").attr("disabled", "disabled");
    jQuery("input[title='Field 5']").attr("disabled", "disabled");
    jQuery("textarea[title='Field 6']").attr("disabled", "disabled");
    jQuery("input[title='Field 7']").attr("disabled", "disabled");
    }
);
</script>

<script language="javascript"> $(function(){ $('a[onclick*="clickDatePicker"]').css('display','none'); }); </script>

[#2]

What about customizing the list form with PowerApps...by the way: are you using the classic experience of SPO?

[#3]

@Juan Carlos González Martín - we have considered using PowerApps, however due to several different factors we have decided against it, one being the high urgency of this request and the lack of experience we have in house of building PowerApps. The list we have currently works well in terms of user experience, so ideally want to keep it as similar as possible to how it currently is. If PowerApps is the only way then we will need to revisit this, but would be ideal if we could add some Javacript to the page to achieve this.

We are using modern experience, however the NewForm.aspx, EditForm.aspx and DispForm.aspx pages have all reverted to classic experience due to us having several script editor web parts embedded into each one.