什么是最简单的方法来禁用/启用按钮和链接（jQuery + Bootstrap） [英] What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

问题描述

有时候我使用锚作为按钮，有时我只是使用按钮。我要停用特定的点击事件，以便：

• 看起来禁用

div>

按钮

按钮很容易禁用 disabled 是一个按钮属性，由浏览器：

 < input type =submitclass =btnvalue =我的输入提交disabled / 
< input type =buttonclass =btnvalue =我的输入按钮disabled /> 
< button class =btndisabled>我的按钮< / button> 
  

要使用自定义jQuery函数禁用这些功能，您只需使用 fn.extend（） ：

  //禁用函数
 jQuery.fn.extend（{
 disable：function（state）{
 return this.each function（）{
 this.disabled = state; 
}）;; 
} 
}）; 
 
 //禁用：
 $（'input [type =submit]，input [type =button]，button'）。 
 
 //使用：
 $（'input [type =submit]，input [type =button]，button'）。 
  

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.comclass =btn>我的链接< / a> 
  

当然，这不会阻止链接在单击时工作。以上链接将转到 http://example.com 。为了防止这种情况，我们可以在 disabled 类中添加一个简单的jQuery代码来定位锚标签，以调用 event.preventDefault（） ：

 code> $（'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）; 
}）; 
} 
}）; 
 
 //禁用：
 $（'a'）。disable（true）; 
 
 //使用：
 $（'a'）。disable（false）; 
  

JSFiddle禁用链接演示 。

---

组合

然后，我们可以扩展上述禁用函数，以检查我们尝试使用禁用的元素类型 is（） 。这样我们可以 toggleClass（）如果不是输入或按钮元素，或切换 disabled 属性：

  //扩展禁用函数
 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）; 
}）; 
} 
}）; 
 
 //禁用所有：
 $（'input，button，a'）disable（true）; 
 
 //启用所有：
 $（'input，button，a'）。disable（false）; 
  

完全组合的JSFiddle演示 。

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

Sometimes I use anchors styled as buttons and sometimes I just use buttons. I want to disable specific clicky-things so that:

• They look disabled
• They stop being clicked

How can I do this?

解决方案

Buttons

Buttons are simple to disable as disabled is a button property which is handled by the browser:

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

To disable these with a custom jQuery function, you'd simply make use of 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.

Otherwise you'd make use of jQuery's prop() method:

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

---

Anchor Tags

It's worth noting that disabled isn't a valid property for anchor tags. For this reason, Bootstrap uses the following styling on its .btn elements:

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

Note how the [disabled] property is targeted as well as a .disabled class. The .disabled class is what is needed to make an anchor tag appear disabled.

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

Of course, this will not prevent links from functioning when clicked. The above link will take us to http://example.com. To prevent this, we can add in a simple piece of jQuery code to target anchor tags with the disabled class to call event.preventDefault():

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

We can toggle the disabled class by using 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 disabled link demo.

---

Combined

We can then extend the previous disable function made above to check the type of element we're attempting to disable using is(). This way we can toggleClass() if it isn't an input or button element, or toggle the disabled property if it is:

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

It's worth further noting that the above function will also work on all input types.

这篇关于什么是最简单的方法来禁用/启用按钮和链接（jQuery + Bootstrap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！