Applying an error state to a checkbox parent div

I have a standard HTML checkbox to which I want to apply an error state - I understand you cannot apply styling directly to a checkbox so I am trying to apply the styling to its parent div instead.

Consider:

<div class="form-row">
    <input type="checkbox" name="checkbox" class="required">
</div>

<div class="form-row">
    <input type="text" name="text" class="text-input required">
</div>

At the moment I can style the error on the text input using something like:

.text-input .error {
    background-color:red;
}

But this does not work on checkboxes - I tried using jQuery to get the checkbox parent and to only style the parent on error for a checkbox (i.e. for a textinput just use the above):

$("form-row:has(input[type='checkbox'] error)").css("background-color", "red");

This does nothing - I don't get any errors but nothing happens to the parent. How can I style the parent div only when the child checkbox has the error class?