Search code examples
htmlsemantic-markupfieldset

Semantic Validity of a Checkbox in a Fieldset Legend?

If I have a checkbox that toggles the activation/deactivation of a group of checkboxes, is it semantically valid to put it in the legend of the fieldset?

<fieldset>
    <legend><label><input type="checkbox"/>Sports</label></legend>
    <label><input type="checkbox"/>Baseball</label>
    <label><input type="checkbox"/>Football</label>
    <label><input type="checkbox"/>Ulama</label>
</fieldset>

This is getting into the nitty-gritty of what HTML is "meant" to do, but I can't come up with a satisfying answer:

  • On the one hand legend is meant to be a title or ask a question. Putting a functional element inside of it seems to go against the spirit of the thing.
  • On the other hand, the controlling checkbox gives context for what is contained within the fieldset, thus it makes sense as a "title" of sorts.
Solution

  • it is and it is the only way.

    you can use Javascript to connect the change event of the checkbox with the disabled attribute with the fieldset.

    Like this:

    $('fieldset > legend checkbox').on('change', function(event) {
  $(this).closest('fieldset').prop('disabled', !$(this).prop('checked'));
});

    in that case, the fieldset can be disabled, but can still be enabled by the checkbox in the legend, because this one isn't disabled.