https://www.publishersglobal.com/assets/controllers/checkbox_limit_controller-1635e84e.js

1import { Controller } from "@hotwired/stimulus"
2
3// Limits checkbox selections to a maximum count
4// Usage:
5//   <div data-controller="checkbox-limit" data-checkbox-limit-max-value="5">
6//     <input type="checkbox" data-checkbox-limit-target="checkbox">
7//     ...
8//     <span data-checkbox-limit-target="message"></span>
9//   </div>
10export default class extends Controller {
11  static targets = ["checkbox", "message"]
12  static values = { max: Number }
13
14  connect() {
15    this.updateState()
16  }
17
18  toggle() {
19    this.updateState()
20  }
21
22  updateState() {
23    const checked = this.checkboxTargets.filter(cb => cb.checked)
24    const unchecked = this.checkboxTargets.filter(cb => !cb.checked)
25    const atLimit = checked.length >= this.maxValue
26
27    // Disable unchecked boxes when at limit
28    unchecked.forEach(cb => {
29      cb.disabled = atLimit
30      cb.closest('div')?.classList.toggle('opacity-50', atLimit)
31    })
32
33    // Update message if target exists
34    if (this.hasMessageTarget) {
35      if (atLimit) {
36        this.messageTarget.textContent = `Limit reached (${this.maxValue} max)`
37        this.messageTarget.classList.remove('hidden')
38      } else {
39        this.messageTarget.classList.add('hidden')
40      }
41    }
42  }
43}