Is there a better way to set checkbox labels to lookup values than I have come up with?

After some digging in Laserfiche Answers I came up with the following to match the checkbox options with a lookup. However, it would be a lot nicer if there was a simpler way to set a checkbox list's labels/values to those loaded from a lookup.

On the submission form:

1. Assigned a lookup to a dropdown (this field will be hidden)
2. Created a checkbox list with the same or more options than what was returned from the lookup.
   • (Note: if the same whenever the lookup is added to them more options for the checkbox will need added manually. If more then code is needed to dynamically hide the extras and if more options are added to the lookup than there are checkbox options, then again more checkbox options will need added. )
3. Create a Mulit-Line textbox: (this will be hidden but make sure to save the data)
4. Add code to javascript that does the following
   • After the loading look ups are finished take the values from the dropdown and save them to the muilti-line textbox.
   • Loads the values from the dropdown into an array
   • Use the array created above and loops through the checkbox options changing the label values to what is in the array (note again I still need to add the code that hides extra checkbox options)
5. My code:

   $(document).ready (function () {
     /*******************************************************************************/
     /*                     START: Add to Selected Departments                      */
     /*******************************************************************************/ 
     /* Wait until after the lookup is complete */
     $(document).on('onloadlookupfinished', function(event){
       
       var theListField = $('.hiddenDepartment select');
       var theListOptions = $('.hiddenDepartment option[value]');
       //departmentCheckboxes
       var myArray = [];
       var arrayLength;
       // add all options with values to the array
       theListOptions.each(function(){      
         myArray.push($(this).val());
       });
       arrayLength = myArray.length;
       //alert('arrayLength: '+ arrayLength); 
       $('.hiddenCheckboxLabels textarea').val(myArray.join("|")).change();
       
       var checkboxIndex = 0;
       $('.departmentCheckboxes .choice label').each(function() {
        // alert('here ' + $(this).text());
          
          $(this).text(myArray[checkboxIndex]);
         checkboxIndex++;
       })
    }); /* END: $(document).on('lookupcomplete', function(event)*/
   
    /*******************************************************************************/
    /* END: Add to Selected Departments */
    /*******************************************************************************/ 
   }); /* END: $(document).ready (function () { */ 

On the approval form, repository copy and other steps after the initial submission:

1. Added the checkbox and multi-line textarea from the last form (the dropdown is no longer needed you would not want to reload from the lookup just in case your approval process is long and there is a chance the values in the lookup change. Those changed options might not match up with the selections that are made on the submission form)
2. Add code to the javascript that does the following
   • Load the list from the Multi-Line textarea into a string. How this is done depends on if the form is currently being displayed as read only or if it's in an active step (such as an approval step), see code below for details
   • Use the string to create an array
   • Use the array created above and loops through the checkbox options changing the label values to what is in the array (note again I still need to add the code that hides extra checkbox options)
3. My code:

   $(document).ready (function () {
     /*******************************************************************************/
     /*                     START: Add to Selected Departments                      */
     /*******************************************************************************/ 
     var myArray = [];
     var stringForArray;
     var arrayLength;
     
     
     if($('.hiddenCheckboxLabels textarea').length == 1)
     {
       
       stringForArray = $('.hiddenCheckboxLabels textarea').val();           
     }
     else
     { 
       stringForArray = $('.hiddenCheckboxLabels div.ro').text();
     };
     
     myArray = stringForArray.split('|')
      
     arrayLength = myArray.length;
     
     var checkboxIndex = 0;
     $('.departmentCheckboxes .choice label').each(function() {
       $(this).text(myArray[checkboxIndex]);
        checkboxIndex++;
     }); 
    
     
     
     /*******************************************************************************/
     /*                      END: Add to Selected Departments                       */
     /*******************************************************************************/
    }); /* END: $(document).ready (function () { */  
   

    

I am also thinking on how to handle if there is a reject path that allows the initiator to resubmit. Should the lookup be reloaded and if yes how to handle the changes to the lookup list and those options already selected by the initiator in the submission step.

Related Link: https://answers.laserfiche.com/questions/191094/Checkbox-labels-changed-in-JavaScript-not-saving-to-repository

EDIT 08/25/2023: Another use case where this is being used - https://answers.laserfiche.com/questions/211300/Populate-Checkbox-options-based-on-Database-Lookup