How to Stop Jquery Mobile to Apply Styles to My Specific Form Elements

How can i stop jQuery mobile to apply styles to my specific form elements

jQuery Mobile will ignore elements whose data-role attributes are set to none. Therefore, you can simply add these attributes to your markup:

<input type="text" name="foo" data-role="none" />
<button type="button" id="bar" data-role="none">Button</button>

prevent jquery mobile from styling element

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"

Disable form elements in jQuery Mobile and update style

Without looping, all you need is to add ui-state-disabled to controlgroup if you want to disable all contents at once.

$(".selector").addClass("ui-state-disabled");

Demo

How to remove jQuery Mobile styling?

Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

Method 1:
It can do it by adding this attribute:
```
data-enhance="false"
```
to the header, content, footer container.
This also needs to be turned in the app loading phase:
```
$(document).on("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});
```
Initialize it before jquery-mobile.js is initialized (look at the example below).
More about this can be found here:
http://jquerymobile.com/test/docs/pages/page-scripting.html
Example: http://jsfiddle.net/Gajotres/UZwpj/
To recreate a page again use this:
```
$('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});
```
Method 2:
Second option is to do it manually with this line:
```
data-role="none"
```
Example: http://jsfiddle.net/Gajotres/LqDke/

Method 3:

Certain HTML elements can be prevented from markup enhancement:

 $(document).bind('mobileinit',function(){
      $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 });

Example: http://jsfiddle.net/Gajotres/gAGtS/

Again initialize it before jquery-mobile.js is initialized (look at the example below).

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content

jQuery Mobile disable enhancement on certain tags?

There are few ways of disabling markup enhancement in jQuery Mobile but in your case there's only one single line solution:

$(document).on('pagebeforeshow', '#index', function(){       
   $('a').removeClass('ui-link');
});

jsFiddle example: http://jsfiddle.net/Gajotres/L4KUT/

Other solutions can be found in my other ARTICLE, to be transparent it is my personal blog. Or find it HERE. Search for the chapter called: Methods of markup enhancement prevention.

There you will find a answer how to disable it on a selector level, unfortunately it only works on native form elements and a tag is not a native form element:

$(document).bind('mobileinit',function(){
     $.mobile.page.prototype.options.keepNative = "select, input";
});

How to prevent jquery mobile adding it's classes to html elements?

Perhaps adding data-role="none" as attribute will help?

http://jquerymobile.com/demos/1.0rc2/docs/forms/forms-all-native.html

How can I make JQuery Mobile ignore elements by css class?

It's just as you said, add the data-role="none" attribute to the anchor tag.

Live Example w/ data-role="none" : http://jsfiddle.net/CrBdX/2/
Live Example wo/ data-role="none" : http://jsfiddle.net/CrBdX/1/

HTML:

<div data-role="page">
    <div id="footer" data-role="footer" data-position="fixed">
        <a href="somelink.html" data-role="none">some link</a>
    </div>
</div>

How to turn off jQuery Mobile's styling of select drop downs?

according to http://jquerymobile.com/test/docs/forms/docs-forms.html

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

Jquery disable theming for a specific element

JQuery UI is made up of some standard CSS framework classes. You can remove the UI themes from an element by turning off those classes. Check out the JQuery UI docs to see a list of the classes and decide which one it is you want to remove (using Firebug makes this pretty easy as well, you can identify which UI classes are applied). ui-widget and ui-state-default are likely choices.

Once you know the class, just use JQuery's removeClass() to get it off:

$('element').removeClass('ui-widget');