Moving checkmarks in checkboxes after page reload - Firefox only

Question

I get strange behavior in Firefox when I put checkboxes inside a list (ol, ul, dl) and then dynamically insert buttons above the list. If I start with something simple list, for example:

<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 as follows:

 $(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, at first it looks fine. But check the first box, reload the page, and the box will move to the second block . Reboot again and it will jump to third. Reboot again and the checkboxes are not checked.

If I do not leave one of the buttons, discarding one of the append calls, this is normal. If I changed the buttons to divs or something like that, that's fine. If I replace the dl tag with a div (and get rid of the dt tags), that will be fine. But I need both buttons, and the checkboxes should be on the list for what I'm trying to create.

Does anyone know what causes this?

Answer 1

Interesting behavior. I assume this is "remembering the values ​​of the form fields" in Firefox. How and why, I don’t know, though.

The problem, of course, may be caused by something outside the code that you showed us. Are you 100% sure that there are no complicated jQuery procedures, other plugins or anything else?

The problem certainly deserves more research, but at the same time try to help .reset() ting. It should return all form values ​​to their predefined state (= unchecked).

Answer 2

Firstly, deleting the script leads to the expected behavior; however, when creating checkboxes, unique names change the description / problematic behavior where it is 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 the box and then reload the page, the check will be cleared altogether.

Changing insertBefore to insertAfter fixes the original problem and causes a check box to be selected, usually after a page refresh. Now I look deeper.

Answer 3

Try:

 <form autocomplete="off"> 

Answer 4

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

I also tried

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

with the same results. it looks like firefox remembers which cell is checked based on its index, so when you update it, you jump because the div before the checkboxes is not done yet. but this is obviously an assumption, since in fact the buttons will have two elements in front of the checkboxes.

Answer 5

Just wrap your list in a form element. Firefox, than can correctly work with flags.

Sincerely.