https://www.voko-oosterhout.nl/clubsite/scripts/form-aantalgroep.js?v=1788417792

1/**
2 *  Plus- en minknoppen bij het veldtype "aantalgroep".
3 *
4 *  Het veld werkt zonder dit script: elke regel is een number-input die zijn eigen aantal post.
5 *  Dit maakt het alleen prettiger in gebruik, en houdt onderweg de tekst met het aantal
6 *  beschikbare plaatsen en de stand van de knoppen bij.
7 *
8 *  De handlers hangen aan document in plaats van aan de velden zelf, want de inschrijfblokken
9 *  voor introducees worden pas na het laden van de pagina toegevoegd.
10 */
11(function ($) {
12
13    "use strict";
14
15    /**
16     *  Voorkomt dat het opnieuw afvuren van change de begrenzing weer binnenkomt.
17     */
18    var begrenzen_bezig = false;
19
20    /**
21     *  De bovengrens van een regel, of null als die er niet is.
22     */
23    function maxVan($input) {
24        var max = parseInt($input.attr("max"), 10);
25        return isNaN(max) ? null : max;
26    }
27
28    function aantalVan($input) {
29        var aantal = parseInt($input.val(), 10);
30        return isNaN(aantal) ? 0 : aantal;
31    }
32
33    function binnenGrenzen(aantal, max) {
34        if (aantal < 0) {
35            aantal = 0;
36        }
37        if (max !== null && aantal > max) {
38            aantal = max;
39        }
40        return aantal;
41    }
42
43    /**
44     *  De tekst met het aantal beschikbare plaatsen en de stand van de knoppen bijwerken.
45     *
46     *  De tekst zelf komt uit een data-attribuut dat de server erop zet, want die staat in een
47     *  label dat een club kan aanpassen en hoort dus niet in dit script.
48     */
49    function bijwerken($input) {
50
51        var $regel = $input.closest(".aantalgroep-regel"),
52            max = maxVan($input),
53            aantal = aantalVan($input),
54            $grens = $regel.find(".aantalgroep-grens"),
55            tekst = $grens.data("tekst");
56
57        if ($grens.length && tekst && max !== null) {
58            $grens.text(String(tekst).replace("#aantal#", Math.max(0, max - aantal)));
59        }
60
61        $regel.find(".aantalgroep-min").prop("disabled", aantal <= 0);
62        $regel.find(".aantalgroep-plus").prop("disabled", max !== null && aantal >= max);
63    }
64
65    /**
66     *  Een stap erbij of eraf.
67     */
68    $(document).on("click", ".aantalgroep-knop", function (e) {
69
70        e.preventDefault();
71
72        var $knop = $(this),
73            $input = $knop.closest(".aantalgroep-keuze").find("input.aantalgroep-aantal"),
74            huidig = aantalVan($input),
75            nieuw = binnenGrenzen(huidig + ($knop.hasClass("aantalgroep-plus") ? 1 : -1), maxVan($input));
76
77        if (nieuw === huidig) {
78            return;
79        }
80
81        /**
82         *  change afvuren, want het bedrag op het scherm wordt door het inschrijfformulier
83         *  herrekend op change van dit veld.
84         */
85        $input.val(nieuw).trigger("change");
86    });
87
88    /**
89     *  Een met de hand getypt aantal binnen de grenzen houden. Gebeurt op change en niet op input,
90     *  zodat er tijdens het typen niets onder iemands handen vandaan verandert.
91     */
92    $(document).on("change", "input.aantalgroep-aantal", function () {
93
94        if (begrenzen_bezig) {
95            return;
96        }
97
98        var $input = $(this),
99            begrensd = binnenGrenzen(aantalVan($input), maxVan($input));
100
101        if ($input.val() !== String(begrensd)) {
102            begrenzen_bezig = true;
103            $input.val(begrensd).trigger("change");
104            begrenzen_bezig = false;
105        }
106    });
107
108    $(document).on("input change", "input.aantalgroep-aantal", function () {
109        bijwerken($(this));
110    });
111
112    $(function () {
113        $("input.aantalgroep-aantal").each(function () {
114            bijwerken($(this));
115        });
116    });
117
118}(jQuery));