prevent jquery mobile from styling element

Question

I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:

<input type='checkbox' style='display:none' />

However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:

<div class='ui-checkbox'>
  <input type='checkbox' style='display:none;' />
</div>

I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?

Answer 1

The attribute that prevents styling is data-role="none"

<input type='checkbox' style='display:none' data-role="none" />

See the Jquery doc: "Preventing auto-initialization of form elements"

Answer 2

For future users.

Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.

        $(document).on('pagebeforecreate', function( e ) {
            $( "input, textarea, select", e.target ).attr( "data-role", "none" );
        });