Form to edit only blank values

In an edit form is there a way to make 'read-only' applicable only to fields that have no value already entered.

Generally I have have clients enter data over a few periods, ie a preliminary stage and then final. There is however no consistency in what is presented in preliminary to final stage, thus can't just create two forms. Basically I don't want clients to be able to edit existing data, but add to fields where they have not previously added data.

I have tried working with form display 'show/hide' rules but not effective. Multiple forms on a page and rules getting too clunky. I guess I can add new fields to create true/false calc against each existing field, but this is going to expand my object considerably.

Any ideas?

Thanks! Will check it out.

114151245992 Try this JS code:

document.querySelectorAll("#view_XX input").forEach(field => {if(field.value !== "") field.setAttribute('readonly',true)});