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

Question

有时我使用锚作为按钮,有时我只使用按钮.我想禁用特定的clicky-things,以便:

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

我怎样才能做到这一点？

Answer 1

纽扣

按钮很容易禁用,因为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禁用按钮和输入演示.

否则你会使用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>

当然,这不会阻止链接在单击时起作用.以上链接将我们带到http://example.com.为了防止这种情况,我们可以添加一个简单的jQuery代码来定位disabled要调用的类的锚标记event.preventDefault():

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

我们可以disabled使用toggleClass()以下方法切换课程:

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().这样我们就可以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);

完整组合JSFiddle演示.

值得进一步注意的是,上述函数也适用于所有输入类型.

Answer 2

我想不出更简单/更简单的方法!;-)

使用Anchor标签(链接):

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

要启用Anchor标记:

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

要禁用Anchor标记:

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

Answer 3

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

<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/>

请注意已添加"已禁用"属性.

启用:

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

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

现在上面的代码将删除'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; }

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

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

• 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]选择器:

button[disabled] { ... }

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

-

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

希望这可以帮助.

Answer 5

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

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

Answer 6

@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,它们将看起来被禁用(感谢bootstrap)并且在单击时不会触发.

Anchor不支持disabled属性,所以我们将依赖.disabled该类使它们看起来被禁用(再次感谢bootstrap)并挂钩一个默认的click事件,通过返回false来阻止点击(不需要在这里preventDefault看到) .

注意:重新启用锚点时,无需取消挂钩此事件.简单地删除.disabled课程就可以了.

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

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

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

Answer 7

请注意,如果您使用Bootstrap的JS按钮和"加载"状态,则会出现一个奇怪的问题.我不知道为什么会这样,但这是如何解决它.

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

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

有点烦人,但这是我正在使用的模式.

Answer 8

所有人的答案和贡献都很棒!我不得不稍微扩展这个功能以包括禁用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 9

对于这种行为,我总是使用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类(如果更改)也将改变其他小部件的样式.

Answer 10

以下对我来说非常有效：

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