2

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>
Adam
  • 8,849
  • 16
  • 67
  • 131
  • 2
    Which version of jQuery are you using? You should probably swap `attr()` for `prop()` there. – alex Mar 04 '14 at 02:32
  • See http://stackoverflow.com/questions/5270689/attrchecked-checked-does-not-work – Bradley Flood Mar 04 '14 at 02:36
  • Can you alos include the HTML for your radio buttons...from a comment in one of the answers it sounds like something is not right there too. – Jon P Mar 04 '14 at 03:08
  • Everything seems fine in this fiddle: http://jsfiddle.net/a8bVT/ – Jon P Mar 04 '14 at 03:18
  • ahh. Alex was right. I'm using jquery 1.10 and I hadn't been using prop. I had no idea using attr would break things. – Adam Mar 04 '14 at 03:25

1 Answers1

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');
timmackay
  • 1,026
  • 4
  • 13
  • 27
  • That doesn't work as well. The radio input is showing checked="checked" though. – Adam Mar 04 '14 at 02:46
  • Can you use a css attribute selector based on the checked attribute resulting to 'checked'? – timmackay Mar 04 '14 at 02:48
  • Is there a different between manually clicking a radio button and doing it using javascript? I tried using your suggestion of using the css attribute selector which works, but it doesn't work when manually clicking the radio button. So if I use both attribute and :checked in css it won't work. – Adam Mar 04 '14 at 02:59
  • If I set the checked in jquery and then want to manually click the other radio button, it won't uncheck the first radio button like I'd expect it to. – Adam Mar 04 '14 at 03:01