在Javascript中禁用/不可点击HTML按钮

Question

我有一个按钮的HTML代码段:

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;
}

在某个事件中,我需要完全禁用此按钮.我尝试使用以下代码,但它不会禁用/灰显按钮,它仍然可以点击.

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

有人建议我申请的CSS导致了这个问题.请建议如何使此按钮不可点击.

Answer 1

使用 :

resetBtn.disabled = "disabled";

这适用于所有浏览器 - > http://jsfiddle.net/fMV4B/

Answer 2

仅使用 CSS：

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

<input class="no-click" />