Checking and unchecking menuitem in a Firefox add-on with jQuery

Question

I have a <menuitem type="checkbox" checked="true" label="Enabled"> element in the Firefox add-on I'm working on. I'm using jQuery to set and unset the checked attribute, like so:

var element = $("#extension-menupopup:first-child");
element.attr("checked", "false");
element.attr("label", "Disabled");
element.attr("tooltiptext", "Extension is disabled.");

The first two .attr() calls seem to work, but the tick mark beside "Enabled" does not disappear, and the label does not change to "Disabled". Verifying the values on Scratchpad's "Browser context", the values are returned as "false" and "Disabled", respectively. So, the values of the attributes are being set properly, but the UI does not update to show these changes. The last line successfully sets the tooltiptext text properly and the UI change is visible immediately. What should I do to make the changes visible in the UI?

Answer 1

It seems that jQuery is not suited for this particular purpose, although it works just fine in other situations. The way to go about changing the label and checked attributes is to do it the normal javascript way:

//get the element that needs to be modified
var element = document.getElementById("extension-menupopup").childNodes[0];
element.setAttribute("checked", false);
element.setAttribute("label", "Disabled");

Also, be aware of this bug to avoid any gotchas.