Laravel多对多关联下的更新复选框标记实现问题

我正尝试实现从多对多关联中获取并显示已更新的复选框状态。

模型代码 #

Candidato 模型 #

public function estados()
{
    return $this->belongsToMany(EstadoPostulacion::class, 'candidato_estado_postulacions', 'status_id', 'user_id')->withTimestamps();        
}

EstadoPostulacion 模型 #

public function candidatos()
{
    return $this->belongsToMany(Candidato::class,  'candidato_estado_postulacions','user_id', 'status_id')->withTimestamps();
}

CandidatoEstadoPostulacion 模型 #

public function candidatos()
{
    return $this->hasMany(Candidato::class,  'status_id', 'user_id');
}

public function estados()
{
    return $this->hasMany(EstadoPostulacion::class, 'id', 'status_id');
}

控制器代码 #

Candidatos 控制器 #

public function index( Vacancy $vacante, Candidato $candidato )
{
    $estados = EstadoPostulacion::pluck('status', 'id');

    $ca = Candidato::with('estados')->get();

    return view('candidatos.index', compact('vacante', 'estados', 'candidato') );
}

数据库表结构 #

Candidatos 表 #

estado_postulaciones 表 #

candidato_estado_postulaciones 表（中间表） #

视图代码 #

candidatos/index.blade.php #

@forelse ($estados as $id => $estado)
    <div>
         <input type="checkbox" name="status[]" id="{{ $estado }}-{{ $candidato->user_id }}" class="peer hidden" value="{{ $id }}" {{ $candidato->estados->contains($id) ? 'checked' : '' }} onchange="this.form.submit()">
         <label for="{{ $estado }}-{{ $candidato->user_id }}" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-500 peer-checked:font-bold peer-checked:text-white">
         <i class="fas fa-folder fa-2x"></i>
         <div class="w-full text-xs">Está en:</div>
         <div class="w-full text-xs text-gray-800 font-semibold uppercase">{{ $estado }}</div>
         </label>
  </div>
  @empty
     <li>No existe ningun estado en la BD</li>
@endforelse

预期效果 #

展示多个职位申请状态复选框，每个复选框对应一个带图标的状态标签；当复选框被选中时，对应标签会高亮（背景变为蓝色、文字加粗且变为白色）；点击复选框可自动提交表单，更新关联的状态信息。

内容的提问来源于stack exchange，提问作者Giancarlort