javascript - 使用 jQuery 使禁用按钮看起来禁用的最简单方法

Question

当我使用 .prop('disabled',true) 来禁用按钮时，它可以工作，但按钮看起来并没有被禁用。我记得在过去，当我使用 .attr('disabled','disabled') 来禁用按钮时，它们会变得更加明显地被禁用，即文本会变成灰色或其他东西，这样用户就不会尝试点击。现在我觉得按钮边框有点淡化，但文本没有。

恢复旧行为的最简单方法是什么？我很懒惰，不想写一行代码来禁用按钮，而另一行代码让它看起来已被禁用——如果可能的话，我想在一个命令中获得这两种效果。我应该使用按钮以外的其他元素吗？一种不同的禁用方法？

我在这里做了一个 fiddle :http://jsfiddle.net/ak2MG/ .这是代码。

HTML:

<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>

Javascript:

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true); } );

Answer 1

或者改变按钮的不透明度

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true).css('opacity',0.5);
});

Fiddle