让我们在决定优点/缺点以及最终什么对特定用例UI/UX最好之前先玩一些例子。
只是，不要显示警报弹出窗口和东西：警报是干扰交互流的因素，而不仅仅是复选框。
三种不同的方法：

1.关闭复选框

最简单的，也许是最好的。用户必须有意识地和故意地取消选中前一个-而不是我们的代码自动地在用户背后做编程性的事情。disabled属性是一个众所周知的UI/UX视觉状态。想象一下，你正在订购额外的东西（酱汁，香料等），你可以检查三个价格。如果通知明确指出，一个人可以订购多达三个额外的，从逻辑上讲，一个人将取消选中一个不太想要的产品（使地方），以更想要的一个。这样的UI行为可以很快被大多数用户所接受。

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

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

个字符
优点：

• 简单代码
• 尊重用户的操作和选择（没有魔法，编程取消检查是在用户背后进行的，可能会被忽视，记住可访问性）

缺点：

• 一个都没有？或者说没有什么重要的。在评论中纠正我，如果你不这样认为）。

2.取消上次勾选

另一种方法是记住最后一个复选框。当达到max时-取消选中最后一个元素。在这种情况下，前两个在该过程中保持不变

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>

的字符串
优点：

• 简单代码
• 更容易理解只有最后一个复选框在切换（只有在用户可以一次看到所有复选框的情况下-这在可滚动应用程序中从未保证）

缺点：

• 不尊重用户选择
• 魔法解除可能会被忽略或看起来像一些UI错误
• 用户可能需要认知地跟踪切换状态并再次视觉地回顾所有选择状态
• 不检查的逻辑可以很快地掌握，但对某些人来说似乎有点随机

3. Snake 取消勾选

FILO-Max。就像在贪吃蛇游戏中一样，当max到达时，最旧的一个被删除，新的一个被附加到数组中。

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>

的字符串
优点：

• 不确定...

缺点：

• 更多代码
• 魔法解除可能会被忽略或看起来像一些UI错误
• 复选框以编程方式变为未选中/选中的逻辑并不明显
• 一旦用户开始将手动取消选中与编程取消选中相结合，复选框变为未选中的认知逻辑就变得奇怪了

你听过托马斯·莫里斯的《乌托邦》吗？
嗯，灰色是“反乌托邦”。☺️
控制论出现了。
让克劳德·香农的熵降下来。
将选项分组3次，并使用3个单选按钮️。