https://www.georgetowncoc.com/assets/controllers/capacity_toggle_controller-77ec8190.js

1import { Controller } from "@hotwired/stimulus"
2
3// Used by staff event ticket/add-on/sponsorship forms to avoid the "0 = unlimited" UX.
4// When "Unlimited" is checked, we disable the capacity input; controllers set capacity=0 server-side.
5// Forms that also declare a `field` target additionally hide the whole capacity group while
6// unlimited is checked (so the number box only appears when a finite capacity is wanted).
7export default class extends Controller {
8  static targets = ["unlimited", "capacity", "field"]
9  static values = { default: Number }
10
11  connect() {
12    if (this.hasCapacityTarget && !this.capacityTarget.dataset.originalPlaceholder) {
13      this.capacityTarget.dataset.originalPlaceholder = this.capacityTarget.getAttribute("placeholder") || ""
14    }
15    this.toggle()
16  }
17
18  toggle(event) {
19    if (!this.hasUnlimitedTarget || !this.hasCapacityTarget) return
20
21    const unlimited = this.unlimitedTarget.checked
22    this.capacityTarget.disabled = unlimited
23    this.capacityTarget.required = !unlimited
24
25    if (unlimited) {
26      // Keep the UI quiet: no confusing "0", and disabled inputs won't submit anyway.
27      this.capacityTarget.value = ""
28      this.capacityTarget.placeholder = ""
29    } else {
30      this.capacityTarget.placeholder = this.capacityTarget.dataset.originalPlaceholder || ""
31      if (event && this.hasDefaultValue && !this.capacityTarget.value) {
32        this.capacityTarget.value = this.defaultValue
33      }
34    }
35
36    // Opt-in: hide the entire capacity field group while unlimited is checked.
37    if (this.hasFieldTarget) {
38      this.fieldTarget.classList.toggle("hidden", unlimited)
39    }
40  }
41}