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:

Answer 1

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>

Answer 2

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 3

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