Most fields do get changed to div elements when saving/read-only, however, radio and checkboxes actually stay on there just in a disabled state.

But the problem you're having isn't actually related to that, it's that your code is looking for a change event, which would never be triggered on the saved copy.

What you need to do is add a way to run your update activity based on the current values rather than only when a change event occurs on the live form.

To do that, you should move the bulk of the code into its own function, call the function for each checked item as soon as the document loads, then also attach the same function to your change event for the "live" updates.

Something like,

$(document).ready(function(){
  // run for already selected items
  $('.item input:checked').each(function(index,value){
    setBackgroundColor($(this));
  });
  
  // update colors when item is selected
  $('.item input').change(function(){
    setBackgroundColor($(this));
  });
});

function setBackgroundColor(field){
    const liNext = field.closest('li').next('li');  //set the variable for the next <li> after the item (= Comments Box)
    const liNextNext = liNext.closest('li').next('li');  //set the variable for the next <li> after the comment box (= Upload)
    
    if (field.val() == 'unsatisfactory'){
      field.closest('li').css('background-color', '#ffe6e6');
      liNext.css('background-color', '#ffe6e6');
      liNextNext.css('background-color', '#ffe6e6');
    }
    
    if (field.val() == 'satisfactorycomment'){
      field.closest('li').css('background-color', '#fff2e6');
      liNext.css('background-color', '#fff2e6');
      liNextNext.css('background-color', '#fff2e6');
    }
    
    else if (field.val() == 'satisfactory'){
      field.closest('li').css('background-color', 'transparent');
    }
}