To check specific number of checbox and disable remaining that are unchecked

In a specific DIV having class ="vipGuests" that have multiple checkboxes (More than 12), I want to select maximum 12 checkboxes. As soon as user select 12th checbox then remaining checkbox will get disabled.

My below mentioned code is only counting number of checkbox that are checked. How I can implement the functionality so that user can check maximum 12 checkbox and remaining will get disabled.

$('.vipGuests input[type=checkbox]').on('change', function () {

            var totalGuest = 0;
            $('.vipGuests input[type=checkbox]:checked').each(function () {
                totalGuest++;
            });
        });

Note: The main thing is that each time during check/uncheck when counter of Checkboxes that are checked is 11 then all checkbox will be active. Only when counter is equals to 12 then the only unchecked checboxes will get disabled.