How can I create a toggle button checklist with a limit?

I'm having trouble creating a simple toggle button checklist, where the user can only **Toggle-On 3 buttons at a time.

I plan to add a lot of buttons, but only allow a maximum of 3 Toggle-on buttons at a time.

How do I accomplish something like this?

I attempted using JQuery, but I'm pretty sure I'm doing something wrong. This code only works for checkboxes by themsleves, but not for the Toggle Button Checkbox used in Bootstrap. To replicate this problem you need the latest bootstrap. Here's a fiddle: https://jsfiddle.net/godsnake/t0cswbpo/4/

Please help me figure this out, I'm a complete noob in Jquery and JS and I'm guessing that's how you solve this issue.

JQuery:

var limit = 3;

    $('input.single-checkbox').on('change', function(evt) {
       if($(this).siblings(':checked').length >= limit) {
           this.checked = false;
       }
    });
    <div class="btn-group-toggle pricing-levels-3 d-inline-block" data-toggle="button-checkbox">

HTML

<div class="btn-group-toggle pricing-levels-3 d-inline-block" data-toggle="button-checkbox">


  <label class="btn btn-secondary">
    <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>

  <label class="btn btn-secondary">
    <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>



  <label class="btn btn-secondary">
    <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike" type="checkbox"  autocomplete="off"> Checked
  </label>

  <label class="btn btn-secondary">
    <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>

        </div>