CSS to detect checked radio button doesn't work when jquery sets checked attribute

Question

I have the following css to create some custom radio buttons using the after pesudo element:

.estimate-forms .special-smallradio:checked + label:after{content: '';width: 12px;height: 12px;border-radius: 50px;position: absolute;top: 3px;background: #99a1a7; left:3px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);}

It works fine when the user clicks the radio buttons manually. But there is an instance where I'll need to mark a radio button as checked by changing its attribute using Jquery.

$(".special-smallradio").attr("checked",true);

None of my css that detects the radio button as being checked works. Any ideas if what I'm trying to do is possible?

edit:

This is my html for the radio buttons. Like I've mentioned, they're custom radio buttons, which may be causing issues.

<input type="radio" name="dates[0]['response']" value="0" class="special-smallradio" id="date_0_0"/> <label for="date_0_0"></label>
<input type="radio" name="dates[0]['response']" value="1" class="special-smallradio" id="date_0_1"/> <label for="date_0_1"></label>

Answer 1

Instead of setting attr('checked', true) , try setting it to 'checked'

I had the same issue previously and found this to work:

$(this).parent().find('a.active input:radio').attr('checked','checked');