Hyperscript: Count and disable checkboxes based on checked-state

Question

I have a list of checkboxes and i would like to disable the unchecked ones via hyperscript, when a set amount is reached and enable them again when under the threshold. How would I write a hyperscript for this?

So far i have this div, but that hyperscript does not work correctly:

<div class="mb-4 overflow-scroll" _="on every change in <div.form-check/>
    set allCheckboxes to <div.form-check/>
    log allCheckboxes">
    <p class="mb-0"><?= $stelle['angebot_headline'] ?? 'N/A' ?></p>
    <div class="form-text mt-0 mb-3">(Max. 8 auswählbar)</div>
    <?php foreach ($stelle['angebote'] ?? [] as $angebot): ?>
        <?= view('personalKampagne/stellenangebot/_angebot', ['angebot' => $angebot]) ?>
    <?php endforeach ?>
</div>

_angebot-php-file contains:

<div class="form-check" id="wrapper_angebot_<?= $angebot['id'] ?? '' ?>">
    <input class="form-check-input form-check-lg"
        type="checkbox"
        name="angebot[<?= $angebot['id'] ?? '' ?>][checked]"
        id="angebot[<?= $angebot['id'] ?? '' ?>]">
    <label class="form-check-label" for="angebot[<?= $angebot['id'] ?? '' ?>]">
        <?= $angebot['angebot'] ?>
    </label>
    <input type="hidden" name="angebot[<?= $angebot['id'] ?>][text]"
        value="<?= $angebot['angebot'] ?>">
</div>

I would like to count all checkboxes and if the amount of checked boxes surpasses, let's say 5, i want to disable the unchecked boxes.

Answer 1

Hopefully this works for you:

on click
if length of <input:checked/> > 5
    add @disabled to <input:not(:checked)/>
else
    remove @disabled from <input/>
end