覆盖元素的变灰效果 [英] Override greyed out effect of element

问题描述

我有这行jQuery，可在触发事件后禁用所有按钮.

$("button").attr("disabled", "disabled");

默认情况下，禁用的按钮显示为灰色，但我想知道是否有一种方法可以覆盖此行为，以便禁用按钮，但不会向用户显示提示?

谢谢.

解决方案

通过CSS:

一种解决方案是使用button[disabled] css选择器为禁用和启用的按钮设置相同的样式，如下所示:

button[disabled], button{
        color:#fff;
        border: none;
        background-color: grey;
    }

问题在于，默认情况下，浏览器的按钮样式不同，因此您需要设置按钮样式.

通过Jquery:

另一种解决方案是将click事件处理程序删除按钮，因此替换此行:

$("button").attr("disabled", "disabled");

为此:

$('button').off('click');

要再次启用点击事件，请使用:

$('button').on('click');

有关在此很好的 answer 上的添加/删除事件处理程序的详细信息

注意:您应该为按钮添加ID(如果您使用多个按钮)，因为上面的代码将删除所有按钮的点击.

I have this line of jQuery which disables all buttons once an event has been triggered.

$("button").attr("disabled", "disabled");

Disabled buttons are greyed-out by default, but I was wondering if there was a way to override this behaviour so that the buttons are disabled, but with no indication to the user?

Thanks.

解决方案

Via CSS:

One solution is to set the same style for disabled and enabled buttons using the button[disabled] css selector like this:

button[disabled], button{
        color:#fff;
        border: none;
        background-color: grey;
    }

The problem is that browsers have different styles for buttons by default, so you will need to style your buttons.

Via Jquery:

Another solution is to remove the click event handler to the buttons, so replace this line:

$("button").attr("disabled", "disabled");

for this one:

$('button').off('click');

To enable the click event again use:

$('button').on('click');

More info about add/remove events handler on this good answer at SO

Note: You should add id for the buttons (if you are using more than one) because the code above will remove the click on all your buttons.

这篇关于覆盖元素的变灰效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！