jquery - 在 shopify parallex 主题中应用 Jsvascript 但脚本无法正常工作

Question

默认情况下，“立即购买”按钮被禁用。我在页面加载时也需要这个

1. 当我们选择“Slab”时，启用“BUY IT NOW”按钮。

2. 当我们选择“Pre-Hung”然后禁用“BUY IT NOW”按钮，并且在“Jamb Sizes”选项的情况下“BUY IT NOW”按钮被禁用。

3. 但是，当用户单击 DOOR HANDLING 中的任何选项时，请启用“立即购买”按钮。

问题：

我已经用 jquery 完成了这项工作。我的 jquery 在谷歌检查元素控制台中工作。但是在 shopify 主题液体文件中，jquery 可以正常工作，但在极少数情况下。我正在尝试很多次。

截图：

截图1，截图2

我的jQuery代码：

   $(document).ready(function () {
    $('input[name="properties[DOOR OPTION]"]').on('input change', function 
      () {
        if ($(this).val() != 'Pre-Hung') {
          alert('ggg');
            $('.add_to_cart').prop('disabled', false);
        }
        else
        {
          $('.add_to_cart').prop('disabled', true);
        }
    });
  $('input[name="properties[DOOR HANDING]"]').on('input change', function () 
   {
        $('.add_to_cart').prop('disabled', false);
    });
 });

Answer 1

您将更改事件绑定了两次，但效果相互矛盾。我不知道 Shopify 我还不确定您的意图，但我想您应该从以下内容开始：

$(document).ready(function () {
  $('body').on('input change','input[name="properties[DOOR OPTION]"]', 
    function() {
      $('.add_to_cart').prop('disabled',$(this).val() != 'Pre-Hung');
    });
 });