Moving checkmarks in checkbox lists after page reload - Firefox only

Question

I'm getting some strange behavior in Firefox whenever I put checkboxes inside a list (ol, ul, dl), and then dynamically insert buttons above the list. If I start with a something simple list like this:

<dl class="c">
    <dt><label for="a1"><input type="checkbox" id="a1" />one</label></dt>
    <dt><label for="a2"><input type="checkbox" id="a2" />two</label></dt>
    <dt><label for="a3"><input type="checkbox" id="a3" />three</label></dt>
</dl>

and add some jQuery like this:

$(document).ready(function(){
    var a = $('<button type="button">a</button>');
    var b = $('<button type="button">b</button>');
    $('<div/>').append(a).append(b).insertBefore($('.c'));
});

...then open it in Firefox, it looks fine at first. But check the first checkbox, reload the page, and the check-mark jumps to the second box. Reload again, and it jumps to the third. Reload yet again, and no checkboxes are left checked.

If I leave out one of the buttons by dropping one of the append calls, it's fine. If I change the buttons to divs or something similar, it's fine. If I replace the dl tag with a div (and get rid of the dt tags), it's fine. But I need both buttons, and the checkboxes have to be in a list for what I'm trying to build.

Does anybody know what's causing this?

Answer 1

Interesting behaviour. My guess is that this is Firefox's "memorize form field values" mechanism going awry - how and why, I don't know, though.

The problem could of course also be caused by something outside the code you have shown us. Are you 100% sure there are no tricky JQuery routines, other plugins or anything?

The issue certainly merits more research, but in the meantime, try whether .reset()ting the form helps. It should bring all the form values back to their predefined state (=unchecked).

Answer 2

update: use $('input[type=checkbox]').attr("autocomplete", "off"); to disable firefox's caching of the checkbox value. (i still can't get around the caching by index hypothesis).

i also tried

$('.c').before($('<div/>').append(a).append(b));

with the same results. it appears that firefox remembers which box is checked based on its index, so when you refresh it's jumping, because the div before the checkboxes isn't made yet. but that's obviously a guess since really the buttons would be two elements before the checkboxes anyway.

Answer 3

First off, removing the script results in the expected behavior; however, giving the checkboxes unique names changes the describe/problematic behavior to where it's not so problematic:

<dt><label for="a1"><input type="checkbox" id="a1" name="c1"/>one</label></dt>
<dt><label for="a2"><input type="checkbox" id="a2" name="c2"/>two</label></dt>
<dt><label for="a3"><input type="checkbox" id="a3" name="c3"/>three</label></dt>

If you check a box and then reload the page, the check is cleared altogether.

Changing insertBefore to insertAfter fixes the original problem and causes the checkbox selection to act is it normally does after a page refresh. I'm looking more deeply into the issue now.

Answer 4

<form autocomplete="off">