I was able to add "disabled" when the product variant quantity is zero however this only work when the product has a single option. When I add multiple option it will stop working and when I used "unless" the other product get affected.
For example, the product size are Small and Large and the color is Black and Blue, the quantity of Small Black = 10 and the quantity of Medium Black is 0.
if I used variant quantity here, the class is added to both Small Black and Medium black even if the Medium black is the only one that has 0 variant
single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
Code for handling the "disabled"
<fieldset class="single-option-radio {{ option.name }}"
name="{{ option.name }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name }}-{{ value | escape | remove: " " }}" >
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape | remove: " " }}"{% unless variant_label_state %} class="disabled"
{% endunless %}
data-variant="{{ value | escape }}">{{ value | escape }}</label>
{% endfor %}
