logo标签列表

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

javascripthtmlcss
20

我有一个关于按钮的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导致了这个问题。请建议如何使此按钮不可点击。

将元素的 .disabled 属性设置为 true 应该可以起作用。但是它没有起作用吗？这段代码是否在执行？resetBtn 是否被正确地赋值为一个 DOM 元素？ - David
是的，代码正在执行并且resetBtn正在被填充为一个DOM元素。 - Azeem
应该可以，.disabled = true 是禁用按钮的一种方法。此外，它在这个fiddle中有效：http://jsfiddle.net/ZJeC4/ 这可能意味着您调用它太早了（按钮还不存在）。 - dkasipovic
尝试这个：$('#reset').attr("disabled", "disabled"); - Amol Udage
7个回答
14
10
仅使用CSS实现：
//CSS
.no-click {pointer-events: none;}

<input class="no-click" />
这是最简单的答案。 - BillJustin
1
这仍然会使按钮通过键盘成为可聚焦和可点击的。 - Andy
4
你可以使用setAttribute()方法来实现：
你的js代码将会是这样的：
document.getElementById("reset").setAttribute('disabled','disabled');
2
这个 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正在运行的示例吗？

我也是这么想的。我已经将所有的CSS放在了我的帖子中。你能否建议一种完全禁用按钮的方法。当我删除CSS时，禁用按钮代码可以正常工作。 - Azeem
我猜测当你将“disabled”设置为真时，你的背景图片（../CustomControl/buttons.png?ver=365321878）需要更改。最简单的方法是创建一个名为“div.ClearButtonDisabled”的类，该类具有不同的背景图像，略微变灰。如果无法看到按钮的图像和样式，则很难确定。 - Gary Stevens
好主意，我会这样做，但是当我将光标移动到按钮上时，如何删除手形光标呢？ - Azeem
一个按钮不应该有手形图标。即使可点击，按钮也应该有默认的箭头指针。在你的CSS中，你设置了“cursor: pointer” - 这就是手形光标来自的地方。在你的禁用CSS类中，设置“pointer: auto;”。 - Gary Stevens
在你的事件中使用 event.stopPropagation()。 - Karim AG
1
请注意，setAttribute 与通过 .disabled = 更改 属性 是不同的。虽然我认为它们应该仍然能够正常工作。 - Explosion Pills
没错，我只是从链接的文章中摘录出来，以节省提问者的时间 :) - Dean Whitehouse
如果属性是本地支持的，那么setAttribute大多数情况下是没有意义的。 - davidkonrad
0
尝试这段代码：
使用jQuery禁用提交按钮，只需要向提交按钮添加“disabled”属性即可。
$('#buttonId').click(function(){

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

要重新启用已禁用的提交按钮，请将“disabled”属性设置为false，或删除“disabled”属性：

$('#buttonId').attr("disabled", false); 
or
$('#buttonId').removeAttr("disabled");
0

您的代码运行良好。

问题几乎肯定是JavaScript代码未被调用或在错误的位置被调用。

如果您立即运行此代码，请确保DOM已加载（window.onload回调，或最好将JS代码放在</body>之前）。

否则，请确保运行JS代码的任何事件实际上正在触发。

JS 运行良好。 我已经使用警报来验证这一点。 我认为我应用的CSS不允许禁用属性工作。 - Azeem
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接