Problem with jQuery Mobile image button disabled

Question

I am again at a loss. I tried a lot of different things to make this image button look off without losing the image. I provide Javascript here as the button is disabled:

$('#button2').attr('data-href', $('#button2').attr('href')); $('#button2').attr('data-onclick', $('#button2').attr('onclick')); $('#button2').attr('href', '#'); $('#button2').attr('onclick', 'return'); $('#button2').button('disabled'); 

This is my HTML code for a button that is disabled depending on what the user is allowed to use in this application:

 <div data-role="content" > <div class="ui-grid-a"> <div class="ui-block-a"> <a href="page1.html" data-role="button" data-transition="flip" id="button1"><img src="image.png" alt="Browse" /></a> </div> <div class="ui-block-b"> <a href="page2.html" data-role="button" data-transition="flip" id="button2"><img src="image.png" alt="Search" /></a> </div> </div> </div> 

And finally, this is the CSS I worked with, which I saw documented for working with CSS3:

 button[disabled], button[disabled]:active { background: #000; } 

Answer 1

Just remove href to disable and return it to enable. Visually you can use opacity: .5; so that it looks disconnected.

 $( '#button2' ).removeAttr( 'href' ); 

Demo: http://jsfiddle.net/ThinkingStiff/Y7v7w/

HTML:

 <div data-role="content" > <div class="ui-grid-a"> <div class="ui-block-a"> <a href="page1.html" data-role="button" data-transition="flip" id="button1"><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/48x48/actions/agt_login.png" alt="Browse" /></a> </div> <div class="ui-block-b"> <a href="page2.html" data-role="button" data-transition="flip" id="button2"><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/48x48/actions/agt_login.png" alt="Search" /></a> </div> </div> </div> 

Script:

 $( '#button2' ).css( 'opacity', '.5' ); $( '#button2' ).removeAttr( 'href' );