Why does a checkbox remain checked in FF3 but not in IE, Chrome or ...

Question

So - I have a checkbox

<asp:CheckBox ID="chkOrder" runat="server" Visible='<%#IsCheckBoxVisible() %>' 
     Checked="false"
     OnCheckedChanged="chkOrder_CheckedChanged" AutoPostBack="true" 
     EnableViewState="false"></asp:CheckBox>

the one above. Now, the checkbox is in a gridview and on databound - for all the rows in the gridview the checkbox is set to false. The problem is that the first checkbox is still true checked.

In IE the problem doesn't exist, same for Chrome. I'm running out of options. Also if i use

$("checkboxName").attr("checked"); // verified on jquery ready function.

In FF it is true; IE false; Chrome false.

Any tips?

EDIT

Now get ready for this : in the generated html - there is NO checked attribute. The diff between FF and IE is exactly the same.

Another thing - the grid that contains the checkboxes has an ajax panel on it and when I page the grid, try to go to page 2 - the checkedChanged in codebehind is triggered.

Answer 1

Have you tried to compare the genrated HTML from FF and IE? (with "view html source")

Just to localize the problem a bit more precisely. It is only a slight chance, but if the HTML is different for both browsers, you have a problem on the serverside with how ASP creates the HTML.

If both are the same, and fully HTML complaint you have found a bug in FF,

Answer 2

You should omit the "checked" attribute entirely if you don't want the checkbox to be checked, as checking is triggered by the presence of a checked attribute, not its value:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set.

http://www.w3.org/TR/html401/interact/forms.html#checkbox

For me, the following markup produces a checkbox which is checked in IE, Firefox and Opera, as you'd expect based on the spec:

<input type="checkbox" checked="false">

Answer 3

In some php coding I did recently, I noticed that FF3 was remembering what I checked, even after a F5 page refresh. Looking at the source showed the correct HTML that I wanted generated. To work around this was to go up to the Address Bar and force the request for the page again.

Why this work around was necessary I'm not sure, but from a normal usability perspective I appreciated it, just not during development.

Answer 4

This also happens to select boxes in FireFox 3, which can be a major pain if you use said box to run AJAX/update the page.

If the user refreshes the page or does some back-button weirdness they can end up with the select box still selected, but actually have to un-select and re-select in order to re-run the AJAX.

In this case I've found that using the body onunload event to clear any select / checkboxes "solves" the "problem".

Answer 5

Firefox remembers the state of form fields by default. Ctrl+F5 will force Firefox to clear this cache.

You can disable this for individual form and input elements:

<form autocomplete="off"> 

<input ... autocomplete="off" />

Answer 6

autocomplete worked perfectly.

Answer 7

$("input[id$=chkOrder]").click(function() {
if (!$(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked", "checked"); } })