Firefox Document Inspector, Firebug & Webkit Developer Tools (Chrome/Safari) not updating HTML to reflect checked status of checkboxes loaded via AJAX

Question

This one is absolutely baffling to me as a veteran UX developer.

I have some content being loaded via an AJAX request initiated when a user checks a box at the beginning of an unordered list. When the box is checked, the list is populated with list items each containing their own check boxes, which default to state "checked".

From this point forward, if I right-click the checkboxes and "Inspect Element", the results are pretty strange. Upon checking or unchecking the top-most box, the results are as expected: the box is checked or unchecked, and in the inspector, this is reflected within the HTML. Therefore, when checked, a new attribute is created (checked="checked") and the state reflects what is seen in the HTML within the page itself.

For those check boxes which were loaded via AJAX, the results are NOT as straightforward (or correct). It IS possible to check and uncheck the boxes in the list, and when submitting the form, the results ARE accurate. When calculated on the fly using jQuery or regular JavaScript, the values of these checkboxes are reported accurately.

However, within the Chrome Developer Tools, or the Firefox Document Inspector, or in Firebug, the HTML for these recently-loaded boxes is not accurate. They DO load with the same state as expected (i.e. they all load with their state set to on; e.g. checked="checked" in all cases). Nevertheless, when changing the state via the browser window, the HTML in the inspector is NOT updating. The reverse is also true: when updating the HTML inside the Inspector window, the browser window is not updating.

While I'm not sure if this is relevant to the problem, I'll include it just in case: the list in question is also being contained within a Bootstrap accordion (which resides, by default, in the "collapsed" state, but expands as the content is loaded via AJAX to provide a fluid UX experience).

I have tested this so far on Windows and Mac OSX Mountain Lion, using Google Chrome, Mozilla Firefox and Apple Safari. The results are consistent in all cases. I cannot figure out why this would happen in this manner. Any feedback is appreciated.

One last note: because of the AJAX request involved in this process, and because the server that provides the requisite response resides behind a firewall (as this is a subscription-based site that I'm working on), I'm not sure that I can provide an example of this via JS Fiddle. If, however, someone has input on how that might work, I'm open to the suggestion and would be happy to provide an example of this frustrating bug.

---

UPDATE:

I noticed when looking at the jQuery API documentation at http://api.jquery.com/prop/ that the W3C specification for checkboxes indicates that "the checked attribute value does not change with the state of the checkbox, while the checked property does". So, this might be a partial explanation of what's going on here. It doesn't however, explain why changing the attribute on non-AJAX-loaded content causes the page to reflect the changed state, and vice-versa.

Answer 1

After a careful review of the W3C standards surrounding this issue, it seems clear that this is a browser bug (albeit not a serious one). The discrepancy exists because the non-AJAX method being used was presumably chosen to be more "friendly" and maintain consistency between the code and the presentation, whereas the AJAX method is more respectful of the true W3C specification. Such is the result of any collaborative development effort.

For those who are hoping to avoid any such inconsistencies, I recommend you use the following syntax:

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

... instead of:

/* 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. */