Firefox Document Inspector、Firebug & Webkit Developer To

作为一个资深的UX开发人员，这对我来说绝对是莫名其妙的。

我有一些内容是通过当用户选中无序列表开头的框时启动的 AJAX 请求加载的。选中该框后，列表中将填充列表项，每个列表项都包含自己的复选框，这些复选框默认为"选中"。

从这一点开始，如果我右键单击复选框和"检查元素"，结果会很奇怪。选中或取消选中最上面的框后，结果符合预期：选中或取消选中该框，并且在检查器中，这将反映在 HTML 中。因此，选中后，将创建一个新属性（checked="checked"），并且状态反映了页面本身的HTML中看到的内容。

对于那些通过 AJAX 加载的复选框，结果并不那么简单（或正确）。可以选中和取消选中列表中的框，并且在提交表单时，结果是准确的。当使用 jQuery 或常规 JavaScript 动态计算时，这些复选框的值会准确报告。

但是，在Chrome Developer Tools，Firefox Document Inspector或Firebug中，这些最近加载的框的HTML并不准确。它们确实以与预期相同的状态加载（即它们都加载时将其状态设置为 on;例如，在所有情况下都 checked="checked"）。但是，当通过浏览器窗口更改状态时，检查器中的 HTML 不会更新。反之亦然：在检查器窗口中更新 HTML 时，浏览器窗口不会更新。

虽然我不确定这是否与问题相关，但为了以防万一，我会包括它：有问题的列表也包含在 Bootstrap 手风琴中（默认情况下，它处于"折叠"状态，但随着内容通过 AJAX 加载而扩展以提供流畅的用户体验）。

到目前为止，我已经在Windows和Mac OSX Mountain Lion上使用Google Chrome，Mozilla Firefox和Apple Safari进行了测试。在所有情况下，结果都是一致的。我不知道为什么会以这种方式发生。任何反馈不胜感激。

最后一点：由于此过程涉及 AJAX 请求，并且由于提供必要响应的服务器位于防火墙后面（因为这是我正在处理的基于订阅的站点），我不确定我是否可以通过 JS Fiddle 提供这方面的示例。但是，如果有人对如何工作有意见，我愿意接受这个建议，并很乐意提供这个令人沮丧的错误的例子。

---

更新：

我在查看 http://api.jquery.com/prop/的 jQuery API 文档时注意到，复选框的 W3C 规范指示"选中的属性值不会随复选框的状态而变化，而选中的属性会改变"。所以，这可能是对这里发生的事情的部分解释。但是，它没有解释为什么更改非 AJAX 加载内容的属性会导致页面反映更改的状态，反之亦然。

$('#some-id').prop('checked', true); // Preferred method for checking a box or radio button

/* DON'T USE THIS CODE!
$('#some-id').attr('checked', 'checked'); // Deprecated method for checking a box or radio button
IF YOU DO, IT'S ON YOU. */