prevent jquery mobile from styling element

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开发者_如何学Go 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?

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"

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" );
        });

I have too many places to change inputs and add data-role="none" The following code works for me:

 <script>
        $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select,input";
        });        
    </script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>