Disabled Radio Button Based on Previous Selection

const lightOption_AA = document.getElementById(
    "ProductSelect-option-Light-Option-Amber-Dotted (Amber LED)"
);
const lightOption_SA = document.getElementById(
    "ProductSelect-option-Light-Option-Smoked-Dotted (Amber LED)"
);
const lightOption_SW = document.getElementById(
    "ProductSelect-option-Light-Option-Smoked-Dotted (White LED)"
);
const forwardLight_SB = document.getElementById(
    "ProductSelect-option-Forward-Light Function <span>(switchback only offered on strip lights)</span>-Switchback"
);
const forwardLight_SQSB = document.getElementById(
    "ProductSelect-option-Forward-Light Function <span>(switchback only offered on strip lights)</span>-Sequential-Switchback"
);

if (
    lightOption_AA.checked ||
    lightOption_SA.checked ||
    lightOption_SW.checked
) {
    forwardLight_SB.disabled = true;
    forwardLight_SB.style["color"] = "#aaa";
    forwardLight_SQSB.disabled = true;
    forwardLight_SQSB.style["color"] = "#aaa";
} else {
    forwardLight_SB.disabled = false;
    forwardLight_SQSB.disabled = false;
}

CodePen Link <– So I have three fieldset tags, each has a few inputs of type=radio inside.

Now, when a user selects any Light Option with the name or word “Dotted” (i.e. the first three options within the corresponding fieldset) I want to disable the Forward Light Function options that have the word or name “Switchback” in them (i.e. the two last options within the corresponding fieldset).

The logic is there, and I feel as if it is on the tip of my tongue. But for some reason, it doesn’t disable the radio buttons.

The id attributes are dynamically created by Shopify and not myself and that is why they are so long and descriptive and have spaces in them. But I did some console logging and the variables still get assigned regardless of this.

I am sure the answer is easy and I am going to feel stupid.

Any help would be appreciated. –> CodePen Link