时间戳

首页 > 解决方案 > 用户无法选中超过 3 个框的条件

javascript - 用户无法选中超过 3 个框的条件

问题描述

{% assign type_bonbon = "Sans sucre, Gélifié, Guimauve, Nougat, Acide, Doux" | split : ", " %}
<section class="page__content">
  {% capture contact_form %}
    <div class="contact">
        <div class="form__control">
            <label class = "form__label">{{ 'contact.form.type' | t }}</label>
            {% for type in type_bonbon %}
              <div class = "checkbox">
                <input type="checkbox" name="contact[Bonbon {{type}}]" value="OUI">{{type}}
              </div>
            {% endfor %}
        </div>
    </div>
  {% endcapture %}
</section>

大家好，

我制作了一个表格，让用户检查他想要的糖果类型。但是，我希望用户在复选框中检查最多 3 个值，表单不应让用户检查超过 3 个复选框。我想我可以通过使用 Jquery 和 AJAX 来摆脱困境，但是在 shopify (liquid) 中我不知道如何实现这一点。再次感谢您的帮助

标签： javascriptjqueryajaxshopifyliquid

解决方案

根据已检查的计数禁用/启用未选中的

const $checks = $('.myChecks').on('change',()=>{
   const checkCount = $checks.filter(':checked').length;
   $checks.filter(':not(:checked)').prop('disabled', checkCount === 3);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="myChecks" type="checkbox"/>
<input class="myChecks" type="checkbox"/>
<input class="myChecks" type="checkbox"/>
<input class="myChecks" type="checkbox"/>
<input class="myChecks" type="checkbox"/>
<input class="myChecks" type="checkbox"/>

推荐阅读