Javascript 检查按钮是否被禁用，然后提醒 HTML Onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7360838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if button disabled then alert HTML Onclick
提问by Belgin Fish
well right now I have this checkbox that's enabling / disabling a submit button for my form.
好吧，现在我有这个复选框，可以为我的表单启用/禁用提交按钮。
I simply have this code for enabling / disabling it
我只是有这个代码来启用/禁用它
onclick="if(this.checked){this.form.submit_btn.disabled=false}else{this.form.submit_btn.disabled=true};this.blur();"
now I'm just wondering how I can make it so that if they click the button when it's disabled, have it alert them with a certain message.
现在我只是想知道如何制作它，以便如果他们在禁用按钮时单击按钮，让它用特定消息提醒他们。
so add an onclick event to the button and have it be like
所以在按钮上添加一个 onclick 事件，让它像
if(this.disabled=true){alert('Button disabled!');}
or something similar? I'm pretty new to all the onclick stuff.
或类似的东西？我对所有 onclick 的东西都很陌生。
Thanks
谢谢
回答by Bas Slagter
Don't know what it's worth but in jQuery it would go like:
不知道它的价值，但在 jQuery 中它会像：
// Not tested!
$(document).ready(function(){
$('#myButton').click(function(){
if($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Don't see the point though. Why bother someone with a message while the button is already disabled (and the browser is showing so).
不过没看到重点。为什么在按钮已禁用（并且浏览器显示如此）的情况下用消息打扰某人。
回答by shawty
You can't well at least not directly anyway. When a button is disabled, then it's disabled and that means it also fires no events.
无论如何，你至少不能直接。当一个按钮被禁用时，它就会被禁用，这意味着它也不会触发任何事件。
Now.. that said, there is a way you could get round it, if you absolutely have to.
现在.. 话虽如此，如果您绝对需要，有一种方法可以绕过它。
Essentially, you can make it work by using 2 divs and a button like so:
本质上，您可以通过使用 2 个 div 和一个按钮来使其工作，如下所示：
<div>
<div id="overlay" style="display:hidden; z-order:99999"> </div>
<button id="mybtn">My Button to click</button>
</div>
You set the overlay div's background colour to transparent, and when you disable the button, you unhide the overlay div.
您将覆盖 div 的背景颜色设置为透明，当您禁用按钮时，您将取消隐藏覆盖 div。
Because the div is transparent, you should see NO change in the button, but clicking on it will result in the clicks getting picked up by the transparent div first.
因为 div 是透明的，所以您应该不会看到按钮中的任何变化，但单击它会导致点击首先被透明 div 拾取。
You would then attach your click handler to the overlay div, and the result is that you can trigger a message that appears (but isn't really) to be being popped up by a click on the disabled button.
然后您将您的点击处理程序附加到覆盖层 div，结果是您可以触发一条消息，该消息出现（但不是真的）通过单击禁用按钮弹出。
回答by Barry Guvenkaya
Instead you may change the image style with gray scale approach.
相反，您可以使用灰度方法更改图像样式。
img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
