How to set form elements to read-only using Javascript

How To

We can simply add a "readonly" attribute to each of the element within a page. For example:

            $(`#field1_1_t4197DataForm_section1 input`).prop('readonly', true);

In this example, it will select all input elements inside the #field1_1_t4197DataForm_section1 container and set their readonly property to true, effectively making them readonly.

#field1_1_t4197DataForm_section1

field1 = Multipaged Form ID

1 = Page No

t4197DataForm = Target Form ID

section1 = Target Form Section ID

        function setInputFieldsReadonly(pageNo) {
            $(`#field1_${pageNo}_t4197DataForm_section1 input`).prop('readonly', true);
            $(`#field1_${pageNo}_t4197DataForm_section1 input`).prop('disabled', true);
            $(`#field1_${pageNo}_t4197DataForm_section1 select`).prop('disabled', true);
            $(`#field1_${pageNo}_t4197DataForm_section1 .formgrid`).addClass("readonly");
            $(`#field1_${pageNo}_t4197DataForm_section1 .spreadsheet`).addClass("readonly");
        }


        // Function to remove readonly attribute from input fields
        function removeInputFieldsReadonly(pageNo) {
            $(`#field1_${pageNo}_t4197DataForm_section1 input`).prop('readonly', false);
            $(`#field1_${pageNo}_t4197DataForm_section1 input`).prop('disabled', false);
            $(`#field1_${pageNo}_t4197DataForm_section1 select`).prop('disabled', false);
            $(`#field1_${pageNo}_t4197DataForm_section1 .formgrid`).removeClass("readonly");
            $(`#field1_${pageNo}_t4197DataForm_section1 .spreadsheet`).removeClass("readonly");
        }