Question

我有以下简单的bootstrap（3）按钮，作为表单的一部分：

<button type="button" class="btn btn-success">Click</button>

在相同的表单中，我有jQuery（1.8.2）Ajax操作在文本框元素的模糊事件上发生。根据此操作的响应，我禁用此按钮。

首先，似乎该按钮确实被禁用，但只要我点击页面上的任何地方，该按钮就会自动重新启用。我应该提一下，我没有代码可以做到这一点，因此我的代码片段没有任何代码。

我已经尝试过这些方法来禁用按钮，如下所述：

.attr("disabled", "disabled")

.prop("disabled", true)

.addClass("disabled")

.removeClass("btn-success").addClass("btn-disabled")

所有这些都会让按钮被禁用，但是当我点击某个地方时，它们都没有，正如我上面提到的那样。当我谈论重新启用时，我的意思是根据我用来禁用它的方法，会发生相反的操作。例如，如果我添加了属性＆＃34; disabled＆＃34;对于button元素，它将从元素中删除。如果我在按钮的类之间切换（＆＃34; btn-success＆＃34; - ＆gt;＆＃34; btn-disabled＆＃34;），它们会被切换回来。它就像某种虚拟巫毒魔法...... :( :)

我还应该提一下，只有在从网站的嵌入代码运行禁用操作时才会出现这种情况。当我在浏览器控制台中运行此特定代码时，该按钮会保持禁用状态，就像应该这样。

此外，我在同一表单中有更多类似的按钮，其中一个也被禁用，但在HTML级别，而不是代码。这个按钮没有任何问题，它表现得像预期的那样。

我在这里错过了什么？...

Answer 1

禁用任何html元素的一种非常简单的方法，即按钮，文本框，div等。

只需在要禁用的元素上添加两个Css属性

opacity:0.4;
pointer-events:none;

这是小提琴 http://jsfiddle.net/qn6k5qoz/

希望这对您有用..

Answer 2

实际上，我设法使用此问题中的代码解决了我的问题：

What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

出于某种原因，只有当我使用＆＃34; extend＆＃34;禁用按钮时本文中显示的代码，禁用并不会发生奇怪的变化。

好吧，因为我不关心奇怪，只关心解决问题和前进，我对这个解决方案很好......并且向前迈进......

快乐的编码！

bootstrap按钮会自动重新启用

2 个答案: