title: Disable/Non-Clickable an HTML button in Javascript
body: <p>I have following HTML snippet for a button:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="Clear" title="Clear"&gt;
     &lt;div class="ClearButton"&gt;
        &lt;button id="reset" type="reset" title="Clear Photos"&gt;&lt;/button&gt;
     &lt;/div&gt;
     &lt;div class="ClearText"&gt;
        Clear
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>var resetBtn = document.getElementById("reset");
  resetBtn.disabled = true;
  </code></pre>
  
  <p>As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.</p>