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

Question

有时我使用样式设置为按钮的锚，有时我仅使用按钮。我想禁用特定的clicky-thing，以便：

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

我怎样才能做到这一点？

Answer 1

Buttons

按钮很容易禁用，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);






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

Anchor Tags

值得注意的是，这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>

当然，这不会阻止单击链接。上面的链接会将我们带到。为了防止这种情况，我们可以添加一个简单的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);

Combined

然后，我们可以扩展前面制作的上一个disable函数，以检查要尝试使用禁用的元素的类型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);

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