I am using CSS to restyle a radio group like this:
It's being done by hiding nesting the actual input (the button) inside the label tag, and then setting the input itself to \[code\]display:none\[/code\] in the CSS, and styling the label itself to become to button, as such:\[code\]<label for="likert1" class="likert"><input type="radio" id="likert1" name="patientViewGroup" value="http://stackoverflow.com/questions/15835683/1">1</label>\[/code\]It can be done all with CSS... but because SOME browsers (I'm lookin' at you, IE8 and bellow) don't recognize the \[code\]:checked\[/code\] pseudoclass, doing it that way men that your actual input - which is what will pass the value out of the form - doesn't always register that it is checked, so JQuery to the rescue.I'm now using JQuery to set addClass ".amClicked" when one of the labels is clicked, at which time it also toggles the radio's "checked" attribute to "true," and removes the "amChecked" class from the siblings. Easy, right? Here's that JQuery code:\[code\]$('.likert').on("click",function() { console.log("clikcy!"); if(!$(this).hasClass('amChecked')) { $(this).addClass("amChecked"); $(this).children(":radio").attr("checked",true).css("display","none"); } $(this).siblings().removeClass("amChecked").children(":radio").css("display","none"); });\[/code\]Well, it WOULD be, except that JQuery, for some reason, seems hell-bent on adding in-line "style" tag to my that is overriding my \[code\]display: none;\[/code\] and un-hiding the radio button itself, like #3 below:
And here's what that input code looks like after a click:\[code\]<input type="radio" id="likert3" name="patientViewGroup" value="http://stackoverflow.com/questions/15835683/3" checked="checked" style="display: inline-block; " class="amChecked">\[/code\]Even worse, adding \[code\].css("display","none")\[/code\] to my click code (as you can see above) doesn't override it - the button still shows up. If I don't add it to the removeClass line, that button just stays there, unchecked, as so:
SO - can anyone tell me WHY Jquery is adding this, unbidden, to my code, and is there anything I can do to stop or override it? Any help would be greatly appreciated!