https://coops.or.kr/assets/controllers/base/conditional_group_controller-cad4629d.js

1import { Controller } from '@hotwired/stimulus';
2
3/**
4 * @domain UI 표시 상태
5 * @concern 트리거 값에 따라 필드 그룹 전환
6 * @description 트리거(select·input)의 현재 값과 일치하는 그룹만 보이고 나머지는 숨겨 그 입력을 비활성화하는 컨트롤러
7 */
8export default class extends Controller {
9  static targets = ['trigger', 'group'];
10  static classes = ['hidden'];
11
12  connect() {
13    this.update();
14  }
15
16  update() {
17    this.groupTargets.forEach((group) => {
18      const on = group.dataset.matchValue === this.triggerTarget.value;
19      group.classList.toggle(this.hiddenClass, !on);
20      // 숨긴 그룹의 입력은 비활성화해 제출되지 않게 한다.
21      group.querySelectorAll('input, select').forEach((el) => {
22        el.disabled = !on;
23      });
24    });
25  }
26}