Disabling dynamic checkout button on variant selection

[LukaszFormela]

Hello,

I'm building a theme and want to disable dynamic checkout button when onOptionChange() event occurs (I'm using official @Shopify/theme-product-form package). Since this button is rendered as div, I can't seem to change disabled attribute with just JS - like checkoutButton.disabled = true.

Is there any workaround for this? I can see that the button has CSS class ready for when it's disabled.

Thanks,

Lukasz

[LukaszFormela]

So just to clarify - Shopify injects the following CSS code that would probably cover disabling the button:

.shopify-payment-button__button[disabled] {
  opacity: 0.6;
  cursor: default;
}

The thing is that disabled attribute is not supported for divs. Additionally I would expect that disabling the button would cancel any event listeners on it.

Do you know if there's a way of achieving it without hiding the button?

Thanks,
Lukasz