Disable/Non-Clickable an HTML button in Javascript

Question

I have following HTML snippet for a button:

HTML:

<div class="Clear" title="Clear">
   <div class="ClearButton">
      <button id="reset" type="reset" title="Clear Photos"></button>
   </div>
   <div class="ClearText">
      Clear
   </div>
</div>

CSS:

div.ClearButton
{
   vertical-align: top;
   display: inline-block;
   background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
   height: 16px;
   overflow: hidden;
   width: 16px;
}

div.Clear
{
   vertical-align: top;
   display: inline-block;
   overflow: hidden;
   cursor: pointer;
   padding-left: 2px;
   padding-bottom: 6px;
   padding-right: 6px;
   padding-top: 4px;
}

On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.

var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;

As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.

Answer 1

Use :

resetBtn.disabled = "disabled";

This works in all browsers -> http://jsfiddle.net/fMV4B/

Answer 2

Using Only CSS:

//CSS
.no-click {pointer-events: none;}

<input class="no-click" />

Answer 3

You can do it with the method : setAttribute()

Your js will be like that :

document.getElementById("reset").setAttribute('disabled','disabled');