Dependent checkboxes

Creating interdependent checkbox controls.

Forms often contain options with dependencies: you can only choose this option if you have also chosen that other option. When the (business) logic to determine which options are available becomes too complex, Sircl offers a solution by allowing you to automatically submit the form on relevant change to have the server render an updated view where options are enabled or disabled according to the rules.

In many cases however the (business) logic is a simple dependency on one other option. Not worth a server roundtrip. Event-actions are then a good solution to enable, clear, check or uncheck other controls.

In the following example, two checkboxes are shown. The second checkbox is only enabled and checkable if the first one is checked:

<div class="form-check">
  <label class="form-check-label">Enable background music
    <input class="form-check-input" type="checkbox"
           ifchecked-enable=".ifmusic"
           ifunchecked-uncheck=".ifmusic"/>
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">Auto-mute on phone calls
    <input class="form-check-input ifmusic" type="checkbox"/>
  </label>
</div>

The first checkbox holds ifchecked-* and ifunchecked-* event-action attributes describing the requested behavior. Event-actions with a name starting with "if" are evaluated on load as well, which results in the second checkbox to be disabled initially, even though there is no disabled attribute.
The ifchecked-enable event-action operates in two directions: it will also disable the other checkbox if this one is unchecked.

Note that by using a class as ifmusic, it is easy to enable/disable multiple controls in reaction to a change on one control. Most event-action attributes take CSS selectors as value and support relative CSS selectors.

The other classes used are Bootstrap 5 styling classes.