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

时间：2013-05-27 16:13:35

标签： jquery html css twitter-bootstrap

有时我会使用固定为按钮的锚点，有时我只使用按钮。我想禁用特定的clicky-things以便：

  • 他们看起来很残疾
  • 他们不再被点击了

我该怎么做？

14 个答案:

答案 0 :(得分：569)

按钮

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

<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 disabled button and input demo

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

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

锚标签

值得注意的是disabled不是valid property的锚标签。因此，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>

当然，这不会阻止链接在单击时起作用。以上链接将我们带到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 disabled link demo

联合

然后我们可以扩展上面的上一个禁用功能，以检查我们尝试使用is()禁用的元素的类型。这样我们可以toggleClass()如果它不是input或button元素，或者切换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);

Full combined JSFiddle demo

值得进一步注意的是，上述功能也适用于所有输入类型。

答案 1 :(得分：45)

我想不出更简单/更简单的方法！ ; - ）

使用Anchor标签（链接）：

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

启用Anchor标记：

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

enter image description here

要禁用Anchor标记：

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

enter image description here

答案 2 :(得分：26)

假设您有文本字段和提交按钮，

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

禁用：

要停用任何按钮，例如，您只需将已停用属性添加为提交按钮，

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

执行上面一行后，你的提交按钮html标签将如下所示：

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

注意＆＃39;禁用＆＃39;属性已添加。

启用：

用于启用按钮，例如在文本字段中有一些文本时。您需要删除禁用属性才能启用按钮，

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

现在，上面的代码将删除“已停用的”＆＃39;属性。

答案 3 :(得分：22)

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

“我只想禁用特定的点击内容，以便：

  • 他们停止点击
  • 他们看起来已停用

这有多难？“

他们停止点击

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

对于指针事件的浏览器支持在今天的最新技术（2014年12月5日）中非常棒。但我们通常必须支持IE领域中的旧浏览器，因此IE10及以下版本不支持指针事件：http://caniuse.com/pointer-events。因此，使用其他人提到的JavaScript解决方案之一可能是传统浏览器的方法。

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

他们看起来已停用

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

1。对于<button>或<input type="button">等按钮，请使用[attribute]选择器：

button[disabled] { ... }

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

-

以下是我在此处提到的内容的基本演示： http://jsfiddle.net/bXm5B/4/

希望这有帮助。

答案 4 :(得分：16)

如果像我一样，你只想禁用一个按钮，不要错过这个长线中隐藏的简单回答：

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

答案 5 :(得分：7)

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

扩展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()

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

按钮和输入支持disabled属性，如果设置为true，它们将显示为禁用（感谢引导程序），并且在单击时不会触发。

Anchor不支持disabled属性，所以我们将依赖.disabled类使它们看起来被禁用（再次感谢bootstrap）并挂钩一个默认的click事件，通过返回来阻止点击false（不需要preventDefault查看here）。

注意：重新启用锚点时，无需取消此事件。简单地删除.disabled类就可以了。

当然，如果您已将自定义单击处理程序附加到链接，这将无济于事，这在使用bootstrap和jQuery时非常常见。因此，为了解决这个问题，我们将使用isDisabled()扩展来测试.disabled类，如下所示：

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

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

答案 6 :(得分：7)

请注意，如果您正在使用Bootstrap的JS按钮并且正在加载＆＃39;那么这就是一个奇怪的问题。州。我不知道为什么会发生这种情况，但这里有解决方法。

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

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

现在您想要将其从加载状态中取出，但也要将其禁用（例如，按钮是“保存”按钮，加载状态表示正在进行验证并且验证失败）。这看起来像合理的Bootstrap JS：

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

不幸的是，这将重置按钮，但不会禁用它。显然，button()执行了一些延迟的任务。因此，您还必须推迟禁用：

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

有点烦人，但这是我经常使用的模式。

答案 7 :(得分：6)

大家的答案和贡献！我不得不稍微扩展这个功能以包括禁用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);
    });
}});

似乎对我有用。谢谢大家！

答案 8 :(得分：5)

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

在HTML中定义标记：

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

使用jQuery初始化按钮：

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

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

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

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

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

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

答案 9 :(得分：3)

以下对我有用：

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

答案 10 :(得分：2)

这是一个相当晚的答案，但我偶然发现这个问题，同时在点击它们之后搜索禁用boostrap按钮的方法，并且可能会添加一个很好的效果（例如微调器）。我找到了一个很棒的图书馆：

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

你只需要包含所需的css和js，为你的按钮添加一些属性，并使用javascript启用lada ... Presto！你的按钮有了新的生命（请查看演示，看看它有多漂亮）！

答案 11 :(得分：2)

我知道我的回答迟了，但IMO这是切换按钮'启用'和按钮'禁用'的最简单方法

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

答案 12 :(得分：1)

假设您在页面上有这些按钮，如：

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

答案 13 :(得分：1)

假设你看起来像现在这样。

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

只需添加：

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

你会得到这个将禁用按钮

<button id="btnSave" class="btn btn-primary" disabled>Save</button>
相关问题
最新问题