Check whether the checkbox is checked or unchecked by loading the page and changing the class to enabled

Question

Through the Storage location I can always keep the checkbox active or disabled even if the page is reloaded, the problem is that I could not validate if when loading the page the checkbox is checked or unchecked to change the label color.

// Verificar se a checkbox está marcada e adicionar a classe ativado
if ($("#id-box-1").prop("checked")){
$('#id-box-1-cor').toggleClass('ativado');
     }

// Esta parte do código insere 1 ou 0 quando ha mudaça na checkbox
$('.chamados-header-item-dispo-box-bg').on("change", function() {
 if ($(this).find(".i-check").is(':checked')){
  $(this).find(".i-value")[0].value = "1";      
   } else {
  $(this).find(".i-value")[0].value = "0";
  }
 Aqui é feito o submit /*$(this).find(".i-value")[0].form.submit();*/
});

.i-check{}
.chamados-header-item-dispo-box-bg{float:left;}
.chamados-header-item-dispo-box {height:55px;width:55px;margin-left:10px;padding: 20px; font-size: 16px; line-height: 16px; box-shadow:-1px -1px 3px rgba(255,255,255,0.1), 2px 2px 6px rgba(0,0,0,0.35);border-radius:5%;background-color:var(--cor-branco)}
.ativado{background: #28a745;}
.i-value{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST">
    <!-- Box 1 -->
    <div class="chamados-header-item-dispo-box-bg">
      <input class="i-check" type="checkbox" id="id-box-1">
      <label class="form-check-label" for="id-box-1">
      <div class="chamados-header-item-dispo-box" id='id-box-1-cor'></div>
     </label>
     <input class="i-value" type="text" name="box1">
    </div>
    <!-- Box 2 -->
    <div class="chamados-header-item-dispo-box-bg">
      <input class="i-check" type="checkbox" id="id-box-2">
      <label class="form-check-label" for="id-box-2">
       <div class="chamados-header-item-dispo-box"></div>
      </label>
      <input class="i-value" type="text" name="box2">
    </div>
    </form>