shopify产品页面上的必选复选框无法正常运行

问题描述

我在产品页面上添加了一个复选框，要求客户在购买前进行检查。 一切正常，除了我刚刚发现选择其他尺寸时，客户无需勾选即可购买商品。我已经在以前的主题上使用了此代码，没有任何问题，不确定这个新主题的哪个部分导致了问题。

这是我的剧本：

// Pre-order Checkbox
    $(function() {
    $('input.acceptTerms').click(function() {
        var unchecked = $('input.acceptTerms:not(:checked)').length;
        if (unchecked == 0) {
            $('#addToCart').removeAttr('disabled');
        }
        else {
            $('#addToCart').attr('disabled','disabled');
        }
    });
});

这是产品页面的html：

{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product',product,id: form_id,class: 'product-single__form small--text-center' %}
  <input type="hidden" name="data-product-id" value="{{ product.id }}">
  {%- unless product.has_only_default_variant -%}
    {%- for option in product.options_with_values -%}
      {%- if settings.product_color_swatches -%}
        {%- assign is_color = false -%}
        {%- assign color_option_index = 0 -%}
        {%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase-%}
        {%- assign color_option_index = forloop.index0 -%}
        {%- assign downcased_option = option.name | downcase -%}
        {%- if downcased_option contains swatch_trigger -%}
          {%- assign is_color = true -%}
        {%- elsif swatch_trigger == 'color' and downcased_option contains 'colour' -%}
          {%- assign is_color = true -%}
        {%- endif -%}
      {%- endif -%}

      {%- if variant_type == 'button' -%}
        {%- render 'variant-button',section_id: section_id,variant_labels_enable: variant_labels_enable,option: option,forloop: forloop,is_color: is_color,color_option_index: color_option_index
        -%}
      {%- else -%}
        {%- render 'variant-dropdown',forloop: forloop
        -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endunless -%}

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js" data-product-select>
    {%- for variant in product.variants -%}
      {%- if variant.available -%}
        <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %}
          selected="selected"{% endif %}>
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {%- else -%}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {%- endif -%}
    {%- endfor -%}
  </select>

  {%- if quantity_enable -%}
    <div class="product__quantity product__quantity--{{ variant_type }}">
      <label for="Quantity-{{ section_id }}" class="variant__label">{{ 'products.product.quantity' | t }}</label>
      <input type="number" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1">
    </div>
  {%- endif -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if enable_payment_button and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- if enable_dynamic_buttons -%}
    <div class="payment-buttons">
  {%- endif -%}

    {%- assign default_text = 'products.product.add_to_cart' | t -%}
    {%- assign button_text = 'products.product.add_to_cart' | t -%}
    {%- if current_variant.available -%}
      {%- if template == 'product.preorder' -%}
        {%- assign default_text = 'products.product.add_to_cart' | t -%}
        {%- assign button_text = 'products.product.preorder' | t -%}
      {%- endif -%}
    {%- else -%}
      {%- assign button_text = 'products.product.sold_out' | t -%}
    {%- endif -%}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      data-add-to-cart
      class="{% if enable_dynamic_buttons %}btn btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      disabled id="addToCart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span data-add-to-cart-text data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    </div>
  {%- endif -%}

  {%- unless product.empty? -%}
    <textarea class="hide" aria-hidden="true" data-variant-json>
      {{ product.variants | json }}
    </textarea>
    {%- if product.options.size > 1 -%}
      <textarea class="hide" aria-hidden="true" data-current-variant-json>
        {{ current_variant | json }}
      </textarea>
    {%- endif -%}
  {%- endunless -%}
<br>
<div class="checkbox">
    <input type="checkbox" value="" class="acceptTerms"> <span style="color: #E91B39; font-size: 8pt; letter-spacing: 0.2em;">THIS PRODUCT IS HANDMADE IN THE UK AND SHIPS WITHIN 2-3 DAYS VIA FEDEX. PLEASE ALLOW ADDITIONAL DELAYS THAT MAY OCCUR DUE TO COVID-19. MEASURE YOURSELF AND CONSULT SIZE CHART BEFORE ORDERING,AS YOUR NORMAL SIZE MAY DIFFER FROM THESE CUT & SEW GARMENTS. THESE ARE CUSTOM MADE AND THERE ARE NO RETURNS. CHECK BOX TO AGREE TO THESE TERMS AND CONTINUE WITH YOUR PURCHASE.</span>
  </div>

{% endform %}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）