Check if button disabled then alert HTML Onclick

well right now I have this checkbox that's enabling / disabling a submit button f开发者_StackOverflow社区or 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

if(this.disabled=true){alert('Button disabled!');}

or something similar? I'm pretty new to all the onclick stuff.

Thanks

Don't know what it's worth but in jQuery it would go like:

// 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).

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:

    <div>
      <div id="overlay" style="display:hidden; z-order:99999">&nbsp;</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.

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.

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.

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+ */
}