什么是最简单的方法来禁用/启用button和链接（jQuery + Bootstrap）

有时候我会使用button的forms，有时我只是使用button。 我想禁用特定的clicky事物，以便：

• 他们看起来残疾
• 他们停止点击

我该怎么做？

Answer 1

纽扣

button很容易禁用，因为disabled是由浏览器处理的button属性：

 <input type="submit" class="btn" value="My Input Submit" disabled/> <input type="button" class="btn" value="My Input Button" disabled/> <button class="btn" disabled>My Button</button> 

要使用自定义jQuery函数禁用这些函数，只需使用fn.extend() ：

 // Disable function jQuery.fn.extend({ disable: function(state) { return this.each(function() { this.disabled = state; }); } }); // Disabled with: $('input[type="submit"], input[type="button"], button').disable(true); // Enabled with: $('input[type="submit"], input[type="button"], button').disable(false); 

JSFiddle禁用button和input演示 。

否则，你会使用jQuery的prop()方法：

 $('button').prop('disabled', true); $('button').prop('disabled', false); 

---

锚标签

值得注意的是， disabled不是锚标签的有效属性 。 为此，Bootstrap在其.btn元素上使用以下样式：

 .btn.disabled, .btn[disabled] { cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #333; background-color: #E6E6E6; } 

注意[disabled]属性是如何定位以及.disabled类的。 .disabled类是使锚标记显示为禁用状态所需的。

 <a href="http://example.com" class="btn">My Link</a> 

当然，这不会阻止点击链接的function。 上面的链接将带我们到http://example.com 。 为了防止这种情况发生，我们可以添加一个简单的jQuery代码，使用disabled类来定位锚标签，以调用event.preventDefault() ：

 $('body').on('click', 'a.disabled', function(event) { event.preventDefault(); }); 

我们可以使用toggleClass()来切换disabled类：

 jQuery.fn.extend({ disable: function(state) { return this.each(function() { var $this = $(this); $this.toggleClass('disabled', state); }); } }); // Disabled with: $('a').disable(true); // Enabled with: $('a').disable(false); 

JSFiddle禁用链接演示 。

---

综合

然后，我们可以扩展前面的禁用函数，使用is()来检查我们试图禁用的元素的types。 这样，如果不是input或button元素，我们可以toggleClass() ，或者如果它是切换disabled属性：

 // Extended disable function jQuery.fn.extend({ disable: function(state) { return this.each(function() { var $this = $(this); if($this.is('input, button, textarea, select')) this.disabled = state; else $this.toggleClass('disabled', state); }); } }); // Disabled on all: $('input, button, a').disable(true); // Enabled on all: $('input, button, a').disable(false); 

全面结合JSFiddle演示 。

值得进一步指出的是，上述function也适用于所有inputtypes。

Answer 2

我想不出更简单/更简单的方法！ 😉

---

使用锚标签（链接）：

 <a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a> 

---

要启用定位标记

  $('#delete').removeClass('disabled'); $('#delete').attr("data-toggle", "modal"); 

---

要禁用锚定标记

  $('#delete').addClass('disabled'); $('#delete').removeAttr('data-toggle'); 

Answer 3

假设你有文本字段并提交button，

 <input type="text" id="text-field" /> <input type="submit" class="btn" value="Submit"/> 

禁用：

要禁用任何button，例如，提交button，你只需要添加禁用的属性为，

 $('input[type="submit"]').attr('disabled','disabled'); 

在执行上面的代码之后，你的提交button的html标签看起来像这样：

 <input type="submit" class="btn" value="Submit" disabled/> 

注意添加了“禁用”属性 。

启用：

用于启用button，例如当文本字段中有一些文本时。 您将需要删除禁用属性来启用button，

  if ($('#text-field').val() != '') { $('input[type="submit"]').removeAttr('disabled'); } 

现在上面的代码将删除“禁用”属性。

Answer 4

我知道我迟到了，但要具体回答这两个问题：

“我只是想禁用特定的点击事件，所以：

• 他们停止点击
• 他们看起来残疾

这有多难？

他们停止点击

1.对于<button>或<input type="button"> ，添加属性： disabled 。

 <button type="submit" disabled>Register</button> <input type="button" value="Register" disabled> 

2.对于链接，任何链接…实际上，任何HTML元素，您可以使用CSS3 指针事件 。

 .selector { pointer-events:none; } 

对于指针事件的浏览器支持是今天最先进的技术（5/12/14）。 但是我们通常必须在IE领域支持传统浏览器，所以IE10及以下版本不支持指针事件： http ： //caniuse.com/pointer-events 。 因此，使用其他人提到的JavaScript解决scheme之一可能是传统浏览器的一种方式。

有关指针事件的更多信息：

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

他们看起来残疾

显然这是一个CSS的答案，所以：

1.对于<button>或<input type="button">使用[attribute]select器：

 button[disabled] { ... } input[type=button][disabled] { ... } 

–

这里是我在这里提到的东西的基本演示： http : //jsfiddle.net/bXm5B/4/

希望这可以帮助。

Answer 5

如果像我一样，你只是想禁用一个button，不要错过隐藏在这个长线程中的简单答案：

  $("#button").prop('disabled', true); 

Answer 6

@James Donnelly提供了一个全面的答案，它依赖于扩展jQuery的一个新function。 这是一个好主意，所以我要调整他的代码，使其以我需要的方式工作。

扩展jQuery

 $.fn.disable=-> setState $(@), true $.fn.enable =-> setState $(@), false $.fn.isDisabled =-> $(@).hasClass 'disabled' setState=($el, state) -> $el.each -> $(@).prop('disabled', state) if $(@).is 'button, input' if state then $(@).addClass('disabled') else $(@).removeClass('disabled') $('body').on('click', 'a.disabled', -> false) 

用法

 $('.btn-stateful').disable() $('#my-anchor').enable() 

代码将处理单个元素或元素列表。

button和input支持disabled属性，如果设置为true ，他们将看起来禁用（感谢引导），并不会触发点击。

锚不支持禁用的属性，所以我们将依靠.disabled类来使它们看起来被禁用（再次感谢引导）并挂接一个默认的单击事件，通过返回false来阻止点击（不需要preventDefault看到这里 ）。

注意 ：重新启用锚点时，不需要解除此事件。 简单地删除.disabled类就行。

当然，如果你在链接上附加了一个自定义的点击处理程序，这是没有帮助的，这在使用引导程序和jQuery时非常常见。 所以为了处理这个问题，我们要使用isDisabled()扩展来testing.disabled类，如下所示：

 $('#my-anchor').click -> return false if $(@).isDisabled() # do something useful 

我希望这有助于简化一些事情。

Answer 7

很好的答案和贡献！ 我不得不稍微扩展这个function，包括禁用select元素：

 jQuery.fn.extend({ disable: function (state) { return this.each(function () { var $this = jQuery(this); if ($this.is('input, button')) this.disabled = state; else if ($this.is('select') && state) $this.attr('disabled', 'disabled'); else if ($this.is('select') && !state) $this.removeAttr('disabled'); else $this.toggleClass('disabled', state); }); }}); 

似乎正在为我工​​作。 谢谢大家！

Answer 8

请注意，如果使用Bootstrap的JSbutton和“加载”状态，会出现一个奇怪的问题。 我不知道为什么发生这种情况，但是这里是如何解决的。

假设您有一个button，并将其设置为加载状态：

 var myButton = $('#myBootstrapButton'); myButton.button('loading'); 

现在，您想要将其从加载状态中取出，同时也将其禁用（例如，该button是“保存”button，加载状态表示正在进行validation，validation失败）。 这看起来像合理的Bootstrap JS：

 myButton.button('reset').prop('disabled', true); // DOES NOT WORK 

不幸的是，这将重置button，但不禁用它。 显然， button()执行一些延迟任务。 所以你也必须推迟你的禁用：

 myButton.button('reset'); setTimeout(function() { myButton.prop('disabled', true); }, 0); 

有点烦人，但这是我用了很多的模式。

Answer 9

对于这种行为我总是使用jQueryUI button小部件，我用它的链接和button。

在HTML中定义标签：

 <button id="sampleButton">Sample Button</button> <a id="linkButton" href="yourHttpReferenceHere">Link Button</a> 

使用jQuery来初始化button：

 $("#sampleButton").button(); $("#linkButton").button(); 

使用button小部件方法禁用/启用它们：

 $("#sampleButton").button("enable"); //enable the button $("#linkButton").button("disable"); //disable the button 

这将处理button和游标的行为，但是如果您需要更深入并在禁用时更改button样式，请在页面CSS样式文件中覆盖以下CSS类。

 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { background-color:aqua; color:black; } 

但请记住：这些CSS类（如果已更改）也会更改其他小部件的样式。

Answer 10

以下对我很好：

 $("#button").attr('disabled', 'disabled'); 

Answer 11

这是一个相当晚的答案，但是我偶然发现这个问题，同时寻找一种方法来禁用button后，点击它们，也许添加一个很好的效果（微调）。 我find了一个很棒的图书馆：

http://msurguy.github.io/ladda-bootstrap/

你只需要包括所需的CSS和JS，添加一些属性到你的button，并启用拉达与JavaScript … Presto！ 你的button有一个新的生活（请检查演示，看看它是多么美丽）！

Answer 12

上面这个不行，因为有时候

 $(this).attr('checked') == undefined 

调整你的代码

 if(!$(this).attr('checked') || $(this).attr('checked') == false){ 

Answer 13

我知道我的答案是晚了，但国际海事组织这是最简单的方法来切换button“启用”和button“禁用”

 function toggleButtonState(button){ //If button is enabled, -> Disable if (button.disabled === false) { button.disabled = true; //If button is disabled, -> Enable } else if (button.disabled === true) { button.disabled = false; } } 

Answer 14

假设你在页面上有这些button，如：

 <input type="submit" class="byBtn" disabled="disabled" value="Change"/> <input type="submit" class="byBtn" disabled="disabled" value="Change"/> <input type="submit" class="byBtn" disabled="disabled" value="Change"/> <input type="submit" class="byBtn" disabled="disabled" value="Change"/> <input type="submit" class="byBtn" disabled="disabled" value="Change"/> <input type="submit"value="Enable All" onclick="change()"/> 

js代码：

 function change(){ var toenable = document.querySelectorAll(".byBtn"); for (var k in toenable){ toenable[k].removeAttribute("disabled"); } } 

Answer 15

假设你看起来像现在启用的那样。

 <button id="btnSave" class="btn btn-info">Save</button> 

只需添加这个：

 $("#btnSave").prop('disabled', true); 

你会得到这将禁用button

 <button id="btnSave" class="btn btn-primary" disabled>Save</button>