如何使用 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中文網其他相關文章！