HTML5 required attribute one of two fields

Question

I have a form with two required input fields:

Answer 1

Based on Andy's answer, but I needed a checkbox implementation & came up with this.

what role(s) do you want?




where will you work?

jQuery(function ($) {
    // get anything with the data-manyselect
    // you don't even have to name your group if only one group
    var $group = $("[data-manyselect]");

    $group.on('input', function () {
        var group = $(this).data('manyselect');
        // set required property of other inputs in group to false
        var allInGroup = $('*[data-manyselect="'+group+'"]');
        // Set the required property of the other input to false if this input is not empty.
        var oneSet = true;
        $(allInGroup).each(function(){
            if ($(this).prop('checked'))
                oneSet = false;
        });
        $(allInGroup).prop('required', oneSet)
    });
});

Here for anyone else getting here by googling and wanting a quick solution for one of many checkboxes.