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

如何使用 jQuery Bootstrap 轻松禁用/启用按钮和链接

理解问题

有时，您可能会遇到您希望阻止用户与某些按钮或链接进行交互的情况。这涉及以视觉方式指示其禁用状态并防止任何点击事件。

按钮解决方案

通过操作按钮的禁用属性来无缝禁用按钮：

<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 禁用函数：

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

禁用： $('input[type="submit"], input[type="button"], button').disable(true);
启用: $('input[type="submit"], input[type ="button"], button').disable(false);

锚标签的解决方案（链接）

锚标记没有禁用属性，但 Bootstrap 使用 CSS 样式处理此问题。此外，我们可以合并 jQuery 来防止链接在禁用时发挥作用：

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

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

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

禁用：$('a').disable(true);
启用：$( 'a').disable(false);

组合解决方案

结合上述方法，我们可以扩展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);
全部启用：$('input, button, a').disable(false);

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