無効になっている画像をスタイリングするのに問題があります。jQuery Mobile

Question

もう一度迷ってしまいます。このイメージボタンを無効にしてイメージを失うことなく、さまざまなものを試しました。私は、ボタンが無効になっているかを、ここでJavascriptを提供しています：

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

：

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

これは、ユーザーがこのアプリケーションでの使用を見て許可されているものに基づいて無効にされているボタンの私のHTMLです

そして最後に、これは私がCSS3で動作するように文書化さ見てきたことで作業されているCSSです：

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

Answer 1

ちょうどそれを無効にして置くためにhrefを削除します有効に戻す。視覚的には、opacity: .5;を使用して無効にすることができます。

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

デモ：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> 

スクリプト：無効にする何もないので、

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