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

Question

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

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

我怎样才能做到这一点？

score 581 · Accepted Answer

纽扣

按钮很容易禁用，因为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()如果它不是inputorbutton元素，我们可以这样，如果它是，则切换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 演示。

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

score 48 · Accepted Answer

我想不出更简单/更容易的方法！;-)

使用锚标签（链接）：

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

在此处输入图像描述

score 27 · Accepted Answer

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

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

禁用：

要禁用任何按钮，例如，提交按钮，您只需添加disabled属性，

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

执行上述行后，您的提交按钮 html 标记将如下所示：

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

请注意，“禁用”属性已添加。

启用：

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

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

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

score 22 · Accepted Answer

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

“我只想禁用特定的点击功能，以便：

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

这能有多难？”

他们停止点击

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 解决方案之一可能是旧版浏览器的方法。

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

他们看起来残疾

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

<button>1. 对于喜欢或<input type="button">使用选择器的按钮[attribute]：

button[disabled] { ... }

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

--

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

希望这可以帮助。

score 18 · Accepted Answer

如果像我一样，您只想禁用一个按钮，请不要错过这个长线程中巧妙地隐藏的简单答案：

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

score 7 · Accepted Answer

@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，它们将看起来被禁用（感谢引导程序）并且在单击时不会触发。

锚点不支持 disabled 属性，因此我们将依赖.disabled该类来使它们看起来被禁用（再次感谢引导程序）并连接一个默认的单击事件，该事件通过返回 false 来阻止单击（无需preventDefault查看此处） .

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

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

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

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

score 7 · Accepted Answer

请注意，如果您使用 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);

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

score 6 · Accepted Answer

很好的答案和所有人的贡献！我不得不稍微扩展这个功能以包括禁用选择元素：

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

似乎为我工作。谢谢大家！

score 5 · Accepted Answer

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

在 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 类（如果更改）也会更改其他小部件的样式。

score 4 · Accepted Answer

4

以下对我来说非常有效：

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

于 2017-05-02T04:06:39.613 回答

score 3 · Accepted Answer

我知道我的回答迟了，但 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;
  }
}

score 2 · Accepted Answer

这是一个相当晚的答案，但是我在寻找一种方法在单击它们后禁用 boostrap 按钮并可能添加一个很好的效果（fe 微调器）时偶然发现了这个问题。我找到了一个很棒的库，可以做到这一点：

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

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

score 2 · Accepted Answer

假设你有一个看起来像这样的当前启用。

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

只需添加以下内容：

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

你会得到这个将禁用按钮

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

score 2 · Accepted Answer

这上面不起作用，因为有时

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

调整你的代码

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

0

如果要禁用可点击，也可以在 html 中添加内联 this

style="cursor: not-allowed;"

于 2020-05-08T09:18:29.963 回答

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

16 回答 16

纽扣

锚标签

结合

禁用：

启用：

Related

Reference