I've done this for other fields in the past, but not signature fields.  If possible I would like to toggle four different signature fields between read-only and required based on the BP step ID.  Has anyone else accomplished this?

Below is a snippet of my JS, but just can't get it to work correctly.  Wondering if the signature field is a certain attribute that you can't do this with?

Any insight would be greatly appreciated.

Thanks

//Setting Signature Fields Required or Read-Only based on process step

$(document).ready(function () {
    // Mapping of signature fields to their respective valid stage IDs
    const signatureFieldStages = {
        'signatureHR': ['12'], 
        'signatureFirst': ['1', '24', '28', '31'],
        'signatureSecond': ['25', '26'],
        'signatureCM': ['8']
    };

    setTimeout(function () {
        // Get the current stage value using the ID selector
        const currentStage = $('#Field160').val(); // Target the field by its ID
        console.log('Current Stage:', currentStage); // Debugging: Check if the correct value is being fetched

        // Iterate through each signature field
        for (const [fieldClass, validStages] of Object.entries(signatureFieldStages)) {
            console.log('Checking field:', fieldClass, 'Valid Stages:', validStages); // Debugging

            if (validStages.includes(currentStage)) {
                // If the current stage matches one of the valid stages for this field
                $(`.${fieldClass}`).prop('readonly', false).attr('required', 'required'); // Enable and make required
                console.log(`Field ${fieldClass} should be enabled and required`);
            } else {
                // Otherwise, make it readonly and not required
                $(`.${fieldClass}`).prop('readonly', true).removeAttr('required');
                console.log(`Field ${fieldClass} should be readonly and not required`);
            }
        }
    }, 500); // Adjust timeout if needed
});