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

问题描述

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

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

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

我该怎么做?

推荐答案

按钮

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

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>

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

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 禁用按钮和输入演示.

否则您将使用 jQuery 的 prop() 方法:

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

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

<小时>

锚定标签

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

---

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

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

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>

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

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

我们可以使用 toggleClass()disabled 类代码>:

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 禁用链接演示.

然后我们可以扩展上面的禁用函数来检查我们尝试使用 禁用的元素的类型is().这样我们就可以 toggleClass() 如果它不是 input 或 button 元素，或者切换 disabled属性，如果是:

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

完整组合的 JSFiddle 演示.

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

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

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