JQuery Deselect Checkbox once greater than max limit

Let’s play around some examples before deciding on the pros/cons and ultimately what’s best for a specific use case, UI/UX.
Just, don’t show alert popups and stuff: the alerts are the interaction-flow disrupting factor, not the checkboxes alone.

Three different approaches ahead:

1. Disable checkboxes

The simplest and perhaps the best. The user has to consciously and deliberately uncheck a previous one – instead of our code automagically doing programmatic stuff behind the user’s back. The disabled attribute is a well known UI/UX visual state.
Imagine you’re ordering extras (sauces, spices, etc) and you can check three for the price. If the notice explicitly states that one can order up to three extras, logically one will uncheck a less desired product (to make place) for the more desired one. Such UI behavior can be picked up pretty quickly by the majority of users.

const $checkboxes = $(".single-checkbox");
const max = 3;

$checkboxes.on("input", function() {
  const isMax = $checkboxes.filter(":checked").length === max;
  $checkboxes.not(":checked").prop("disabled", isMax);
});

<div class="pricing-levels-3">
  <p><strong>(Select up to 3 products)</strong></p>
  <input class="single-checkbox" type="checkbox">1<br>
  <input class="single-checkbox" type="checkbox">2<br>
  <input class="single-checkbox" type="checkbox">3<br>
  <input class="single-checkbox" type="checkbox">4<br>
  <input class="single-checkbox" type="checkbox">5<br>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Pros:

• Simple code
• User action and choice is respected (no magic, programmatic unchecking is going on behind the user’s back that might pass unnoticed, accessibility in mind)

Cons:

• None? Or none of importance. Correct me in comments if you think otherwise).

2. Uncheck last checked

Another way is to remember the last checkbox. When the max is reached – uncheck that last element. In this case the first two remain unchanged during that process

const $checkboxes = $(".single-checkbox");
const max = 3;
let $last;

$checkboxes.on("input", function() {
  const isMax = $checkboxes.filter(":checked").length - 1 === max;
  if (isMax) $last.prop("checked", false);
  $last = $(this);
});

<div class="pricing-levels-3">
  <p><strong>(Select up to 3 products)</strong></p>
  <input class="single-checkbox" type="checkbox">1<br>
  <input class="single-checkbox" type="checkbox">2<br>
  <input class="single-checkbox" type="checkbox">3<br>
  <input class="single-checkbox" type="checkbox">4<br>
  <input class="single-checkbox" type="checkbox">5<br>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Pros:

• Simple code
• Easier to cognitively understand that only the last checkbox is switching (only in the case the user can see all the checkboxes at once – which in never guaranteed on a scrollable app)

Cons:

• User selection is not respected
• Magic unchecking. Might pass unnoticed or seem like some UI bug
• The user might need to cognitively track the switching state and review visually once again all the choices states
• The unchecking logic can be picked up pretty quickly but to some might seem slightly random

3. Snake unchecking

FILO-Max. Like in a snake game, when max is reached, the oldest one is removed and the new one is appended to the Array.

const $checkboxes = $(".single-checkbox");
const max = 3;
const checked = [];

$checkboxes.on("input", function() {
  const isMax = $checkboxes.filter(":checked").length - 1 === max;

  if (this.checked) {
    // Add to Array head on checked
    checked.push(this);
  } else {
    // Remove from array index on unchecked
    checked.splice(checked.indexOf(this), 1);
  }

  // Remove tail on maxxed
  if (isMax) {
    const $tail = $(checked.shift());
    $tail.prop("checked", false);
  }
});

<div class="pricing-levels-3">
  <p><strong>(Select up to 3 products)</strong></p>
  <input class="single-checkbox" type="checkbox">1<br>
  <input class="single-checkbox" type="checkbox">2<br>
  <input class="single-checkbox" type="checkbox">3<br>
  <input class="single-checkbox" type="checkbox">4<br>
  <input class="single-checkbox" type="checkbox">5<br>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Pros:

• Not sure…

Cons:

• Much more code
• Magic unchecking. Might pass unnoticed or seem like some UI bug
• The logic in which the checkboxes become programmatically unchecked/checked is not immediately obvious
• The cognitive logic in which a checkbox becomes unchecked becomes strange once the user starts to combine manual unchecking with the programmatic one