如何使用 jQuery 和 Bootstrap 輕鬆停用和啟用按鈕和連結？

如何使用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函數fn.extend() 方法：

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

$('input[type="submit"], input[type="button"], button').disable(true);

停用連結

錨標記不支援停用屬性。但是，Bootstrap 提供了 .disabled 類別來實現所需的禁用外觀。為了防止點擊，您可以利用event.preventDefault():

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

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

組合按鈕和連結管理

來簡化程式碼並處理兩個按鈕和鏈接，您可以擴展禁用函數：

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

此函數檢查元素類型並應用適當的停用技術，包括連結的.disabled以及按鈕和其他表單元素的禁用。

透過實作這些技術，您可以無縫停用或啟用頁面上任何類型的可點擊元素，從而增強使用者體驗和網站功能.

以上是如何使用 jQuery 和 Bootstrap 輕鬆停用和啟用按鈕和連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！