Checking if radio buttons are checked in Firefox
Question
On my site, I have two checkboxes created in my ASP.NET MVC view like so:
Html.RadioButton("check", "true", "true" == (string) ViewData["someKey"], new { id = "check1"});
Html.RadioButton("check", "false", "false" == (string) ViewData["someKey"], new { id = "check2"});
I am positive that ViewData["someKey"] has the value "true" in it.
In my JS init function, I perform the following check:
alert($('#check1').is(':checked') + " " + $('#check2').is(':checked'));
In Firefox (and only Firefox), my alert dialog will show the following (it works as expected in every other browser):
Initial page load: true false
Normal refresh via Ctrl + R: false false
Refresh skipping cache via Ctrl + Shift + R: true false
I have tried many different methods of looking at the checkbox value, including $('#check1').attr('checked') without success. If I examine the HTML in Firebug, I can see that the first radio button has the property checked="checked" in it.
Why is the checkbox value changing in FF when I refresh, and how can I mitigate this? Since this seems to be a FF-only bug, how can I change my code to make it work?
This SO question seemed to ask something similar, but none of the proposed solutions seem to work in this case.
Edit : I should also point out that when the radio button is rendered after the refresh in FF, it's not actually being displayed as checked either, despite what the HTML is telling me.
Edit2 : Adding raw HTML as per request
<input id="check1" type="radio" value="True" name="check" checked="checked"/>
<input id="check2" type="radio" value="False" name="check"/>
6 answers
solution1
1 2009-10-09 17:34:26
Can we see the generated HTML? Are you really creating two radio buttons with both the same name and the same value?
Remember when you hit refresh, browsers try to preserve the form field contents of the page before the refresh. This includes radio button state. If you have two indistinguishable radio buttons that would seem to be a good way to confuse a browser trying to re-establish the form state.
solution2
0 2009-10-09 15:40:54
It sounds like your script could be running before the page is fully loaded. Where did you put the Javascript code? If you haven't already, try moving the code to the end of the <body> block.
solution3
0 2009-10-13 15:56:47
I had the same problem a few days ago and the issue was that I was doing the "check" before the item was fully loaded or rendered, it was a DropDownList that I rendered with jQuery.
My case was very specific, but I had to rework the code to take this into account...
solution4
0 ACCPTED 2009-10-15 20:54:05
It seems that the problem isn't with checking whether or not the radio buttons are checked, but more that they buttons are actually unchecked even though the HTML code says otherwise.
I've posted a followup question to this one here as an addendum to this topic.
EDIT : This page has a good description of the problem and the solutions you can take to solve it.
solution5
0 2014-05-13 11:43:17
We've had a similar bug in firefox when using jquery to change the selection. Even though the code changed correctly according to firebug none of the radio buttons was selected. The solution we found is to remove the radio buttons from the DOM and just put them back.
var allradiobuttons = $('...');
allradiobuttons.click(function() {
var radiobutton = $(this);
allradiobuttons.removeAttr("checked");
radiobutton.attr("checked", "checked");
var parent = radiobutton.parent();
parent.html(parent.html()); // This is a weird fix
}
solution6
0 2010-06-16 06:47:54
I used this to force firefox to reset the radiobuttons checked upon refresh.
$(function(){ $('input[name="radiobuttongroup"]')[0].checked = true; });
where [0] is the index of the radiobutton in the specific group ( [0] = first radio button, [1] = second radio button, ..)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.