Setting a limit on number of checkboxes that can be chosen

Question

I have searched other similar questions on here and tried to replicate them, but I am unsure what I am doing wrong.

I am only wanting one checkbox to be able to be checked. I set the limit with limitCal and am checking the siblings.

Anyone see what I am doing wrong?

jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }    
    function packageSelect() {
      var limitCal = 1;
        $('.calendar-check').on('change', function () {
            $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
            if ($(this).siblings(':checked').length >= limitCal) {
                this.checked = false;
            }
            $('#next1').fadeBoolToggle($('.product-check:checked').length > 0);
            var prods = [];
            $('.calendar-check:checked').each(function () { prods.push($(this).val()) });
        });
    };
    packageSelect();

.calendar-check {
  display: none;
}
.product-wrap {
    width: 100%;
    position: relative;
    display: block;
}
.checkmark-img {
    display: none;
    width: 40%;
    height: auto;
    z-index: 1;
    cursor: pointer;
}
.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}
.package-setup {
    display: none;
    margin: 40px 0;
    width: 100%;
}

#calendar-box-wrap {
    margin: 20px 0;
}
.calendar-box {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 0 4%;
    position: relative;
}
.calendar-selection-img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
                            <div class="product-wrap">
                                <label for="cal-2year" class="package-check-toggle">
                                    <img src="images/calendar-package.png" alt="2-year Photo Gift" class="calendar-selection-img">
                                    <img src="images/checkmark-circle.png" class="checkmark-img total-center">
                                </label>
                                <input type="checkbox" class="calendar-check" id="cal-2year" value="2-year Calendar">
                            </div>
                        </div><div class="calendar-box">
                            <div class="product-wrap">
                                <label for="cal-whiteboard" class="package-check-toggle">
                                    <img src="images/calendar-package.png" alt="Whiteboard Photo Gift" class="calendar-selection-img">
                                    <img src="images/checkmark-circle.png" class="checkmark-img total-center">
                                </label>
                                <input type="checkbox" class="calendar-check" id="cal-whiteboard" value="Whiteboard Calendar">
                            </div>
                        </div>

Answer 1

Here's a simplified version of what you're trying to do. Basically, intercepting the click event of the checkbox allows you to prevent the default action (checking the checkbox). The value of checked for this is going to be the value it would be if the click is successful. So, if the checkbox would be unchecked, let the click happen. Also let the click happen if the number of checked checkboxes is less than or equal to the limit. Otherwise, stop the checkbox from getting checked. I've set the limit for this example to 2 just for demonstration.

var limit = 2;
$('input:checkbox').on('click', function (e) {
  if (!this.checked || $('input:checkbox:checked').length <= limit) {
    return true;
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">