Limiting Selection of Agenda Items

In some events, you might want to allow attendees to choose only a limited number of options from your agenda.

For example: the agenda includes 20 sessions, but you want attendees to be able to choose only 5.

In this case, the most common method is using OFFER ELEMENT BLOCKING RULES in the REGISTRATION TEMPLATE editing screen.

However, there are cases where blocking rules can't be used because you only want to apply a numerical limit.

In that case, go to CONFIGURATION > FOR DEVELOPERS > custom.js and insert this simple JavaScript code into your registration form:

$(document).ready(function() {
    const maxSelections = 5;
    const $programCols = $('.program-container .program-col');
    const $checkboxes = $('.program-container .program-col .row-two .check-wrap .checkbox-program input[type="checkbox"]');

    $checkboxes.on('change', updateCheckboxes);

    function updateCheckboxes() {
        let checkedCount = 0;

        $checkboxes.each(function() {
            if ($(this).is(':checked')) {
                checkedCount++;
            }
        });

        if (checkedCount >= maxSelections) {
            $checkboxes.each(function() {
                if (!$(this).is(':checked')) {
                    const $parentDiv = $(this).closest('.program-col');
                    $parentDiv.css('opacity', '0.5');
                    $(this).prop('disabled', true);
                }
            });
        } else {
            $checkboxes.each(function() {
                const $parentDiv = $(this).closest('.program-col');
                $parentDiv.css('opacity', '1');
                $(this).prop('disabled', false);
            });
        }
    }
});

After inserting the code, your screen will look like this:

You can change the selection limit in line two: const maxSelections = 5;

Once saved, test the registration step containing the offer to make sure the script works as expected.