Removing hover state of disabled custom radio button - html

Question

I have a custom radio button using some radio button icons from Font Awesome. I have a hover state on on .radio-spacer, which wraps the radio button. The radio button may be in a disabled state based on some previous selections.
My problem is I want no hover state when the radio button is disabled. But, my hover styles exist on the wrapper and not the button itself and don't reflect whether the button is disabled or not. I can't use, for example, .radio-spacer:disabled as it's just the div wrapping the button and has no disabled state. Any ideas?
.radio-spacer {
float: left;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
width: 103px;
}
.radio-spacer label {
margin-bottom: 0;
}
.radio-spacer:hover {
background-color: lightblue;
}
.radio-spacer:hover span {
color: #fff;
}
input[type="radio"] {
display: none;
}
input[type="radio"]~span {
cursor: pointer;
}
input[type="radio"]:disabled~span {
cursor: not-allowed;
color: #aeaeae !important;
opacity: .65;
}
input[type="radio"]+.fa-dot-circle-o:before {
content: "\f10c";
}
input[type="radio"]:checked+.fa-dot-circle-o:before {
content: "\f192";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="radio-spacer">
<label>
<input type="radio" class="hide select-plan" name="select-plan" />
<span class="fa fa-fw fa-dot-circle-o"></span><span class="radio-label">Select</span>
</label>
</div>
<div class="radio-spacer">
<label>
<input type="radio" class="hide select-plan" name="select-plan" disabled />
<span class="fa fa-fw fa-dot-circle-o"></span><span class="radio-label">Disabled</span>
</label>
</div>

Answer 1

You can make the hover style with an empty <span> element and place it after the radio/checkbox or use an :after pseudo element, example below. You will need javascripts otherwise to check the radio/checkbox status and add a class to the container then style it.
.radio-spacer {
display: inline-block;
vertical-align: top;
padding: 4px 8px;
position: relative;
}
.select-plan:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.select-plan:disabled ~ .radio-label {
color: silver;
cursor: not-allowed;
}
.select-plan:not([disabled]):hover:after {
background: lightblue;
}
<div class="radio-spacer">
<label>
<input type="radio" class="hide select-plan" name="select-plan" />
<span class="radio-label">Select</span>
</label>
</div>
<div class="radio-spacer">
<label>
<input type="radio" class="hide select-plan" name="select-plan" disabled />
<span class="radio-label">Disabled</span>
</label>
</div>