如何限制复选框

Question

我正在使用名为 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>

Answer 1

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

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

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

Answer 2

我猜这就是你要找的东西

代码停止一个以上的复选框选择，你可以在你的主页上执行这个脚本 Loaded 因为我在运行时附加了复选框侦听器。 Why I am doing this at runtime? 我假设这些复选框来自第三方插件RestroPress。

jQuery(document).on('DOMNodeInserted', function(e) {
    if (jQuery(e.target).hasClass('view-food-item-wrap')) {
        window.noodlesSelectionCount = 0;

        jQuery("#fooditem-details input").on("change", function(event) {
            console.log(event.currentTarget.getAttribute("id"));
            if (event.currentTarget.getAttribute("id").includes("noodle")) {
                if (this.checked) {
                    window.noodlesSelectionCount = window.noodlesSelectionCount + 1
                } else {
                    window.noodlesSelectionCount = window.noodlesSelectionCount - 1
                }
                if (this.checked && window.noodlesSelectionCount > 1) {
                    window.noodlesSelectionCount = window.noodlesSelectionCount - 1
                    event.originalEvent.preventDefault();
                    event.originalEvent.stopPropagation();
                    event.currentTarget.checked = false;
                }
            }
        })
    }
});

Answer 3

如果您能够更改 HTML 并在对应的复选框周围添加一个包装器，您可以这样做：

$('.limited-checks').on('click', function() {
  let $container = $(this).closest('.container');
  let maxChecks = $container.data('max-checks');
  let checked = $container.find('.limited-checks:checked');
  if(checked.length > maxChecks) {
  	alert( "You can choose only " + maxChecks + " option(s) in this section." );
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<h6>Choice of Noodle (max 1)</h6>
<div class="container" data-max-checks="1">
<div><label for="fat-rice-noodle"><input name="Fat Rice Noodle" type="checkbox" value="58|1||checkbox" data-type="checkbox" class="limited-checks"/>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" class="limited-checks"/>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" class="limited-checks"/>Egg Noodle (Contains gluten)</label></div>
</div>

</form>

如果您无法更改 HTML，它会变得有点混乱，选择正确的复选框要困难得多，您需要找到另一种方法来告诉每个部分，允许选中多少个复选框