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.
future 有三种不同的方法:
1.禁用复选框
最简单的，也许也是最好的.用户必须有意识和故意地取消选中以前的代码--而不是在用户背后自动执行我们的代码编程.disabled属性是众所周知的UI/UX可视状态.
想象一下，你点了额外的调味料(调味汁、香料等)，你可以判断三种调味料的价格.如果通知明确规定，一个人最多可以订购三个额外的产品，从逻辑上讲，一个人将取消选中不太想要的产品(以便为更想要的产品让位).这样的用户界面行为可以很快被大多数用户接受.
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>
优点:
- 简单代码
- 尊重用户的行为和 Select (没有魔力，程序取消勾选是在用户背后进行的，可能不会被注意到，考虑到可访问性)
缺点:
- 一个都没有？要不就是不重要.如果你不这么认为，请在 comments 中纠正我).
2.取消选中上次选中的
另一种方法是记住last checkbox.当达到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>
优点:
- 简单代码
- 更容易理解只有最后一个复选框是切换的(只有在用户可以一次看到所有复选框的情况下-这在可滚动的应用程序上永远不能保证)
缺点:
- 不尊重用户 Select
- 神奇的取消判断.可能不会被注意到，或者看起来像是某个UI错误
- 用户可能需要认知地跟踪切换状态，并再次可视地查看所有 Select 状态
- 不判断的逻辑可以很快学会，但对一些人来说可能看起来有点随机
3. Snake unchecking
菲罗-麦克斯.就像在蛇游戏中一样，当达到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错误
- 复选框以编程方式取消选中/选中的逻辑并不是一目了然的
- 一旦用户开始将手动取消选中与程序化取消选中相结合，复选框变为未选中的认知逻辑就会变得奇怪