页面重新加载后在复选框列表中移动复选标记 - 仅限 Firefox

Question

每当我将复选框放入列表（ol、ul、dl）中，然后在列表上方动态插入按钮时，我都会在 Firefox 中遇到一些奇怪的行为。如果我从这样一个简单的列表开始：

<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>

并像这样添加一些 jQuery：

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

...然后在Firefox中打开它，一开始看起来还不错。 但是选中第一个复选框，重新加载页面，选中标记会跳转到第二个框。再次重新加载，它跳到第三个。再次重新加载，并没有选中任何复选框。

如果我通过删除其中一个附加调用而省略了其中一个按钮，那很好。如果我将按钮更改为 div 或类似的东西，那很好。如果我用 div 替换 dl 标签（并去掉 dt 标签），那很好。但是我需要两个按钮，并且复选框必须在我要构建的列表中。

有人知道这是什么原因吗？

Answer 1

首先，删除脚本会产生预期的行为；但是，为复选框提供唯一名称会将描述/有问题的行为更改为不那么有问题的地方：

<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>

如果您选中一个框，然后重新加载页面，则该选中将被完全清除。

将insertBefore 更改为insertAfter 可修复原始问题并导致复选框选择在页面刷新后正常执行。我现在正在更深入地研究这个问题。

Answer 2

有趣的行为。我的猜测是，这是 Firefox 的“记忆表单字段值”机制出了问题——不过，我不知道如何以及为什么。

这个问题当然也可能是由您向我们展示的代码之外的东西引起的。您是否 100% 确定没有棘手的 JQuery 例程、其他插件或任何东西？

这个问题当然值得更多研究，但与此同时，试试.reset()ting 表单是否有帮助。它应该将所有表单值恢复到其预定义状态（=未选中）。

Answer 3

试试：

<form autocomplete="off">

Answer 4

更新： 使用$('input[type=checkbox]').attr("autocomplete", "off"); 禁用Firefox 对复选框值的缓存。 （我仍然无法通过索引假设绕过缓存）。

我也试过了

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

结果相同。似乎firefox会根据其索引记住检查了哪个框，因此当您刷新它时它会跳跃，因为尚未制作复选框之前的div。但这显然是一个猜测，因为按钮实际上是复选框之前的两个元素。

Answer 5

只需将您的列表包装在一个表单元素中。 Firefox 可以正常使用复选框。

最好的问候。