How can I select a radio option with jQuery based on product variant?

Technical Q&A
1

Hello, I have a product a product with 2 variants, 4 Pack and 8 Pack.

The 4 Pack is not available for subscription.

The 8 Pack is available for subscription.

Currently, I’m working on a JavaScript solution with the following logic:

hide the subscription option when ‘4 Pack’ is selected
select the radio option one-time purchase.

Right now, I can make the first option work, but when I try to add either option to my code to select the one-time-purchase radio:

document.querySelector('.one-time-purchase').click();
//or
document.querySelector('.one-time-purchase input').click();

It breaks the logic for both.

Do you know what I have to do here to get this to select the right radio when 4 Pack is selected (no sub), and switch back to sub available when any other Packs are selected (sub is only unavailable for 4 Pack)).

Here’s the Store:

https://crispandcrude.myshopify.com/products/mellow-mule

Password:
susahx

Here’s my code:

/* ======================================
	DISABLE 4 Pack Subscriptions
========================================= */
var checkExist = setInterval(function() {
  // Check if Subscription variant exists on the page, if not, check again in 100ms
  if (document.querySelector('.subscription-wrap')) {
    // Clear interval so this only runs once
    clearInterval(checkExist);

    // Variant title to prevent sub on
    let noSub = '4 Pack'

    // DOM elements 
    let variants = document.querySelectorAll('[data-value]');
    let subscriptionForm = document.querySelector('.subscribe-save')
    let initialCheckedValue = document.querySelector('.swatch input:checked')

    // For each variant option
    variants.forEach(variant =>
      // Add an onclick event listener
      variant.addEventListener('click', e => {
        // If the variant selected matches the no subscription variable
        if (e.target.value == noSub) {
          // Hide subscription option          
          subscriptionForm.style.display = 'none'
          // and select one time option
         // this is the option that breaks if I try to use it to select the right radio        
          document.querySelector('.one-time-purchase').click();
        } else {
          // Show subscription form
          subscriptionForm.style.display = 'inline-block'
        }
      })
    )

    // On first load (this is a work in progress to hide the subscription on load if 4 Pack is selected)
//     if (initialCheckedValue.value == noSub) {
//       // Hide subscription option and click first/one time option
//       subscriptionForm.style.display = 'none'
//       document.querySelector('.one-time-purchase input').click();
//     } else {
//       // Show subscription form
//       subscriptionForm.style.display = 'inline-block'
//     }
  } 
}, 100); // check every 100ms