CODEWITHSUNDEEP
jquery-mobile
DMac the Destroyer
DMac the Destroyer

Reputation: 5290

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 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?

Upvotes: 21

Views: 19221

Answers (3)

Anton Sivov
Anton Sivov

Reputation: 414

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>

Upvotes: 2

pauloya
pauloya

Reputation: 2563

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"

Upvotes: 62

KA.
KA.

Reputation: 4484

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

Upvotes: 9

Related Questions