时间戳

首页 > 解决方案 > 如何限制复选框

javascript - 如何限制复选框

问题描述

我使用名为 RestroPress 的第三方插件来创建在线菜单。它允许我创建可以在将主要项目添加到菜单时购买的其他项目。这是通过在弹出窗口中加载的表单，尽管我想限制他们可以添加的项目数量，即“面条的选择”只允许检查一个选项，而“口味的选择”只会允许检查 5 个选项。

不幸的是，我正在使用下面的代码，并且我发现的所有解决方案都不适用于复选框/输入的这种布局......有没有办法通过 JS 或 jQuery 来做到这一点？

网站链接：order.miss-china

    <form>
<h6>Choice of Noodle</h6>
<div><label for="fat-rice-noodle"><input name="Fat Rice Noodle" type="checkbox" value="58|1||checkbox" data-type="checkbox" />Fat Rice Noodle</label></div>
<div><label for="thin-rice-noodle"><input name="Thin Rice Noodle" type="checkbox" value="57|1||checkbox" data-type="checkbox" />Thin Rice Noodle</label></div>
<div><label for="egg-noodle-contains-gluten"><input name="Egg Noodle (Contains gluten)" type="checkbox" value="56|1||checkbox" data-type="checkbox" />Egg Noodle (Contains gluten)</label></div>

<h6>Choice of Flavours</h6>
<div><label for="fish-choice-of-flavours"><input name="Fish" type="checkbox" value="66|1||checkbox" data-type="checkbox" />Fish</label></div>
<div><label for="beef-choice-of-flavours"><input name="Beef" type="checkbox" value="63|1||checkbox" data-type="checkbox" />Beef</label></div>
<div><label for="prawn-wontons-contains-gluten"><input name="Prawn Wontons (Contains gluten)" type="checkbox" value="60|1||checkbox" data-type="checkbox" />Prawn Wontons (Contains gluten)</label></div>
<div><label for="prawns-choice-of-flavours"><input name="Prawns" type="checkbox" value="65|1||checkbox" data-type="checkbox" />Prawns</label></div>
<div><label for="sliced-bbq-pork-choice-of-flavours"><input name="Sliced BBQ Pork" type="checkbox" value="62|1||checkbox" data-type="checkbox" />Sliced BBQ Pork</label></div>
<div><label for="chicken-choice-of-flavours"><input name="Chicken" type="checkbox" value="64|1||checkbox" data-type="checkbox" />Chicken</label></div>
<div><label for="chicken-dumplings-contains-gluten"><input name="Chicken Dumplings (Contains gluten)" type="checkbox" value="61|1||checkbox" data-type="checkbox" />Chicken Dumplings (Contains gluten)</label>

</div>
</form>

标签： javascriptjquerycheckbox

解决方案

我认为可以做到这一点的方法是为每个单独的部分设置一个函数，然后您可以使用 isChecked 布尔值来查看选中了哪个复选框，然后添加诸如 checkBoxes 之类的计数，以便您可以查看选中了多少个框。

通过这样做，您可以控制 isChecked 布尔值以启用和禁用该部分中的其他复选框。

因此，也许您可​​以在 YouTube 上找到有关启用和禁用复选框的教程。

推荐阅读