javascript - 停止检查 alpineJS 中的复选框？

Question

我开始在我的项目中使用 alpine JS 并遇到了这种情况，我真的不知道解决这个问题的最佳方法。我有一个输入复选框，我需要限制用户只能选择其中的 12 个。我可能可以用普通的 javascript 或 jquery 来做到这一点，但因为我决定使用 alpine JS 可能会一直使用它。所以这是我的问题

我有一个这样的输入类型复选框:

<input type="checkbox" @click="toggle = !toggle, count = count + 1">

并且有一个保存状态的父 div:

<div x-data="{ count: 0 }">

作为输入的父级，所以如果我有例如 24 个复选框..我该怎么做才能让用户不能点击超过 12 个复选框？

Answer 1

您可以绑定(bind)到disabled 并检查count >= 12。

<div x-data="{ count: 0 }">
  <input
    type="checkbox"
    :disabled="count >= 12"
    @click="toggle = !toggle, count = count + 1"
  >
</div>