Styling all unchecked checkboxes after an item is selected

I am currently styling a form that already utilizes the checkbox trick of styling the labels to look how I want them to look, and so far I have had success with this. However, my goal is to have all of the checkboxes appear as normal, but once an item has been selected, I would like all of the remaining unchecked boxes to reduce in opacity.

I've come close with my targeting, shown below:

input[type=radio]:checked+label {
    opacity: 1;
}

input[type=radio]:not(:checked)+label {
    opacity: 0.5;
}

I was able to style all checked and unchecked how I want them. The trouble is by default, all checkboxes are unchecked, therefore all of the items are automatically displayed with reduced opacity until an item is checked.

If there is a way to only apply the reduced opacity to unchecked items only after an item is selected, I could use some help in discovering how. CSS-only solutions are preferable, but I am open to using javascript/jquery if necessary. Thanks!

Edit: Here is a rough demo showcasing my dilemma

https://jsfiddle.net/james_doe/wva3pdek/1/

Here is an updated jsfiddle. All I added was:

$("input[type=radio]").click(function(){
    $("input[type=radio]:checked+label").css("opacity", "1");
  $("input[type=radio]:not(:checked)+label").css("opacity", "0.5");
});

The code simply uses jquery to detect when you click a radio button and then sets opacity to 1 while setting the others to 0.5