panel/app/javascript/controllers/required_checkbox_controller.js

import { Controller } from "@hotwired/stimulus";

/*
 * Para poder indicar que al menos uno del grupo de checkboxes es
 * obligatorio, marcamos uno como `required` (que es el que mostraría el
 * error) y se lo quitamos cuando detectamos que alguno cambió.
 */
export default class extends Controller {
  static targets = ["required", "checkbox"];

  connect() {
  }

  checkboxTargetConnected(checkboxTarget) {
    if (checkboxTarget.checked) {
      this.requiredTarget.required = false;
      this.revalid();
    }
  }

  /*
   * El grupo deja de ser obligatorio cuando al menos uno está activo.
   */
  change(event = undefined) {
    if (event.target.checked) {
      this.requiredTarget.required = false;
    } else {
      this.requiredTarget.required = !Array.from(this.checkboxTargets).some(x => x.checked);
    }

    for (const checkbox of this.checkboxTargets) {
      if (checkbox === event.target) continue;

      checkbox.required = !event.target.checked;
    }
  }

  /*
   * Si el checkbox es considerado inválido, transmitir todos los
   * estados a los checkboxes.
   */
  invalid(event = undefined) {
    for (const checkbox of this.checkboxTargets) {
      checkbox.required = true;
    }
  }

  revalid(event = undefined) {
    for (const checkbox of this.checkboxTargets) {
      checkbox.required = false;
    }
  }
}