Loading Jquery UI checkboxes without displaying normal checkboxes first

I'm 开发者_C百科using jquery UI checkboxes to replace the standard html checkboxes. However when you enter the site first you will see the html checkboxes and then jquery UI will transform them. This looks really bad and I would like the person whom enters the site to immediately see the jquery ui checkboxes, without any flash of the html checkboxes.

Anyone know how to fix this issue?

Thanks M

With a slight change to the demo shown at http://jqueryui.com/demos/button/#checkbox

$(function() {
    $( "#format" ).buttonset();
    $( "#format" ).show();
});

<div id="format" style="display:none;">
    <input type="checkbox" id="check1" /><label for="check1">B</label>
    <input type="checkbox" id="check2" /><label for="check2">I</label>
    <input type="checkbox" id="check3" /><label for="check3">U</label>
</div>

All I did was add style="display:none;" to the div. So now the user will not see the html checkboxes. Next step is to call $( "#format" ).show(); after the jquery ui checkboxes have been created. So the user will only see the ui checkboxes and never the html checkboxes.