Bootstrap中点击按钮后变灰并显示加载中实例代码

Bootstrap插件的魅力令人难以抗拒。今天，长沙网络推广带领大家深入了解Bootstrap中的一个实用功能：点击按钮后，按钮会变灰并显示加载中的状态，下面是这个功能的实例代码，感兴趣的朋友不妨一起看看。

你需要在按钮中加入data-loading-text属性，这个属性用于显示按钮点击后正在加载的文本。例如：

```html

添加成员

```

接下来，通过jQuery监听按钮的点击事件，当按钮被点击时，调用button()方法将按钮设置为加载状态，显示正在加载的文本，并禁用按钮。加载完成后，可以通过再次调用button()方法重置按钮状态。代码如下：

```javascript

$(".btn-check").click(function () {

$(this).button('loading'); //禁用按钮并显示提交中

// 这里可以添加你的其他代码，比如发起异步请求

$(this).button('reset'); //重置按钮

});

```

你也可以直接使用JavaScript设置disabled属性为true来禁用按钮，代码如下：

```javascript

document.getElementById("btn").disabled = true; // JavaScript原生方式

```

或者使用jQuery来设置：

```javascript

$("btn").attr("disabled", true); // jQuery方式

```

对应的HTML按钮元素如下：

```html

```

以上就是长沙网络推广给大家介绍的Bootstrap中点击按钮后变灰并显示加载中的实例代码。希望这些代码能够帮助到大家。如果有任何疑问或需要进一步的帮助，请随时留言，长沙网络推广会及时回复大家的。也感谢大家对狼蚁SEO网站的支持与关注！在实际使用中，你可以根据自己的需求调整和优化这些代码，实现更丰富的交互效果。