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

Disable/Non-Clickable an HTML button in Javascript

本文关键字：Javascript 中的 HTML 按钮 禁用      更新时间：2023-09-26

我有一个按钮的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是导致这个问题。请建议我怎样才能使这个按钮不可点击

使用说明:

resetBtn.disabled = "disabled";

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

仅使用CSS:

//CSS
.no-click {pointer-events: none;}
<input class="no-click" />

可以使用setAttribute()

方法

你的js会像这样:

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

这个JSFiddle显示了它的工作原理，基于:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled。它可能没有像预期的那样工作，因为你的CSS使它在视觉上看起来不同。首先删除CSS以确保JavaScript按预期工作。

下面是JSFiddle的代码: 
<button type="button" id="test">Click Me!</button>
<script>
document.getElementById("test").disabled = true;
</script>

你有一个例子，当你的JavaScript正在运行?

你看过这个答案了吗

https://stackoverflow.com/a/3014678/2992661 

resetBtn.setAttribute('disabled', 'disabled');

你的代码运行良好。

问题几乎肯定是JavaScript代码要么根本没有被调用，要么在错误的位置被调用。

如果你立即运行这段代码，确保DOM被加载(window.onload回调，或者最好在</body>之前有你的JS代码)。

试试下面的代码:

要用jQuery禁用提交按钮，你只需要给提交按钮添加一个" disabled "属性。

$('#buttonId').click(function(){
    $('#buttonId').attr("disabled", true);  
});

要重新启用被禁用的提交按钮，将" disabled "属性设置为false，或者删除" disabled "属性:

$('#buttonId').attr("disabled", false); 
or
$('#buttonId').removeAttr("disabled");
相关文章：