Question

我又在这里不知所措。我已经尝试了很多不同的东西来让这个图像按钮看起来被禁用而不会丢失我的图像。我在这里提供了关于按钮被禁用的Javascript：

$('#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：

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

最后这是我一直在使用的CSS，我已经看到记录使用CSS3：

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' );

麻烦造型禁用图像按钮jQuery Mobile

1 个答案: