无法设置禁用图像按钮的样式 jQuery Mobile答案

【问题标题】：Trouble styling a disabled image button jQuery Mobile无法设置禁用图像按钮的样式 jQuery Mobile
【发布时间】：2012-05-21 21:43:57
【问题描述】：

我又在这里不知所措了。我已经尝试了很多不同的方法来让这个图像按钮看起来被禁用而不会丢失我的图像。我在这里提供了关于如何禁用按钮的 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;
}

【问题讨论】：

HTML 没有按钮，所以没有什么可以禁用的。你所拥有的是锚。您需要使用 CSS 来调整锚点的外观，使其看起来被禁用。但是，因为它是一个锚，它永远不会真正被禁用，除非你用 jquery 杀死点击。
这让我感到难以置信。 JS 禁止该按钮转到 page2.html，但它看起来像一个损坏的按钮。有没有更好的方法来处理这个按钮并将图像保留在里面？
首先，不要再称它为“按钮”了。哪里都没有按钮。这是一个带有图像的锚标签。你可以做类似 $('#button2').click(function() { $(this).css({'opacity': '0.3'}); return false; });实际的按钮元素写成
好的，这也是我所知道的，但是在 jQuery Mobile 中使用 data-role="button" 会使它出现并充当按钮。不过，我会试试你的 JQ。谢谢斯科特。
上述方法对此不起作用，但谢谢。我会继续寻找和尝试。

标签： jquery css jquery-mobile

【解决方案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' );

【讨论】：