如何使用 jQuery 和 Bootstrap 禁用和启用按钮和链接？

使用 jQuery 和 Bootstrap 禁用和启用按钮和链接

有时您需要防止特定按钮或链接被单击并赋予它们禁用的外观。以下是使用 jQuery 和 Bootstrap 实现此目的的方法：

按钮

HTML 中的按钮具有内置的“disabled”属性，可以轻松禁用它们：

<button class="btn" disabled>Disabled Button</button>

要使用自定义 jQuery 函数禁用按钮，请使用disable() 扩展其功能方法：

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

$('button').disable(true); // Disable buttons
$('button').disable(false); // Enable buttons

锚标记

Disabled 不是锚标记 () 的有效属性。相反，Bootstrap 使用 .btn.disabled 类对元素进行样式设置，使它们显示为禁用状态。

<a href="#" class="btn disabled">Disabled Link</a>

要防止链接在禁用时发挥作用，请使用 jQuery 拦截点击：

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

组合方法

您可以扩展disable()函数来处理输入、按钮和链接：

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); // Disable all clickable elements
$('input, button, a').disable(false); // Enable all clickable elements

以上是如何使用 jQuery 和 Bootstrap 禁用和启用按钮和链接？的详细内容。更多信息请关注PHP中文网其他相关文章！