21

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?

3 Answers 3

62

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"

1
9

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" );
        });
1
  • 8
    and for future future users, the live() function is being deprecated in favor of the on function, as of jQuery version 1.7 Commented Jan 24, 2013 at 19:45
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.