要实现这种功能，可以有以下一些方式：

1.使用js实现

通过对按钮添加disabled样式属性实现，具体代码如下：

 $("#btnSendCode").click(function(){
 $("#btnSendCode").removeAttr("disabled"); //开始执行代码禁用按钮
  DoSomething();//处理相关逻辑
  $("#btnSendCode").attr({ "disabled": "true" }); //执行完成后，把按钮重新变为可用
});1234

2.使用bootstrap等三方插件

像bootstrap这种前端框架已经有现成的禁用按钮的功能，你只要在点击按钮后给按钮加个disabled属性就可以了

Button

禁用按钮的使用，可以从两个维度来分析，分别是：「无效的禁用状态」和「有效的禁用状态」。

无效的禁用状态

有一种情况是，在一个页面里，一个按钮，可能会有几种不同的情况存在。那人要问了，既然是一个页面，为什么会有多种状态同时存在的情况呢？

比如，在出行场景中，普通乘客发起订单，司机接单后是可以发送消息的（左图）。但是从第三方渠道来的乘客，司机是无法发送站内消息的，只能通过电话联系乘客（右图）。

不同渠道来的用户，司机端的页面会呈现不同的按钮状态。相同的页面，第三方渠道来的乘客，在司机端就不需要露出消息按钮了，这样可以减少无效信息对司机的干扰，还可以避免司机习惯性操作带来的无效反馈，比如点击消息，显示「无法发送消息」。或者显示禁用，也会影响司机的操作判断。

从这个案例中我们可以看出，当一个按钮在某种情况下始终无法被触发时，就会选择让它直接消失，而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态，以免按钮消失而打乱页面布局。但是要知道，在某种情况下，按钮无用时，无意义的展示反而会产生干扰信息，就像上面说到的那样。

所以这里有一个结论是：禁用按钮需要可触发的时机，如果没有这个时机，禁用状态就没有存在的必要。如果存在，那它也是一个无效的状态。

既然是无效的，最好就不要出现了。

有效的禁用状态

在上面的例子里，有一个前提不可忽略，那就是司机是否可以理解我们不显示的原因。当然，司机会接受相关培训，产品中也会有渠道标识，所以司机能够明白页面中存在的差异。

但在其他产品中，当状态不同，按钮变化无法自洽的时候，又怎么去处理呢？我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点，比较典型的案例是在线上购物时，一件商品会有多个类型供消费者选择，比如不同的尺寸、型号等，当其中一种类型被抢光时，这个商品依然是可见的，只是无法选择，展示出了禁用状态。

在这种场景中，我们不能一下子把其他无法购买的类型隐藏，因为用户需要知道我们所有的商品类别，了解商品的全部属性，尽管当下无法购买，但有上新的可能，用户依然可以选择等待，并将其加入收藏，还是会有机会促成这笔交易。而且当可选类型变多的时候，只是禁用没有库存的类型，可以使其他可选项保持固定的位置，有利于我们二次搜索和加购。这种场景的禁用也是暂时的，直到商品下架或者上新。

但就像我以前说过的，常常我们见多了的东西，就认为是正常的，但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作，但是禁用的原由始终没有给到用户合理的解释，以至于许多人见到类似的操作都是一头雾水。所以在设计过程中，尤其要谨慎对待，尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面，如今也将原来的商品纯禁用按钮，替换成了「缺货」。选择缺货的商品之后，按钮会变成「提醒掌柜补货」。

从原来的用户单方面接收无法点击的按钮，到现在直观显示缺货，点击后同时提醒到商家，这样的操作从功能角度来说是一个升级。

这就是我说的，有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用，而是告知用户，它如何可被使用。

小结

如果一个按钮在不同的阶段有禁用和可用的状态显示，那么意图是很明显的。比如一些活动页面，某个按钮的禁用状态是倒计时，就像电影的前期宣传，为电影的上线制造话题和热度，来鼓励更多人的观看一样。

对于按钮来说，显示禁用则代表它在满足一定条件后即可拥有可点击性，让我们明确地了解它就在这里，未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫，特别是营销类的活动，像是「明日 8 点可抢」、「提醒商家补货」的按钮文案，无一不在传达「可用性」的信息，引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示，多出现在表单中，当用户没有完成输入的时候则无法点击，因为看的多了，我们就以为这是正常的。但我们都知道它仍可优化，比如，在它以禁用状态出现时，用更为友好的方式去提醒用户应如何激活，而不是漆黑一片，且完全不知道它所存在的意图。

我们要知道的是，禁用按钮本身不是一个特殊的对象，只是禁用状态在页面中是一个特殊的存在，它是产品设计中的一种规则。为什么按钮不可用，或者说一定场景下为什么功能不可用，当无法依靠用户直觉理解的时候，是需要作出解释的，也就是怎么禁的问题。

禁用按钮的使用，可以从两个维度来分析，分别是：「无效的禁用状态」和「有效的禁用状态」。

如果一个按钮在不同的阶段有禁用和可用的状态显示，那么意图是很明显的。比如一些活动页面，某个按钮的禁用状态是倒计时，就像电影的前期宣传，为电影的上线制造话题和热度，来鼓励更多人的观看一样。

对于按钮来说，显示禁用则代表它在满足一定条件后即可拥有可点击性，让我们明确地了解它就在这里，未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫，特别是营销类的活动，像是「明日 8 点可抢」、「提醒商家补货」的按钮文案，无一不在传达「可用性」的信息，引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示，多出现在表单中，当用户没有完成输入的时候则无法点击，因为看的多了，我们就以为这是正常的。但我们都知道它仍可优化，比如，在它以禁用状态出现时，用更为友好的方式去提醒用户应如何激活，而不是漆黑一片，且完全不知道它所存在的意图。

我们要知道的是，禁用按钮本身不是一个特殊的对象，只是禁用状态在页面中是一个特殊的存在，它是产品设计中的一种规则。为什么按钮不可用，或者说一定场景下为什么功能不可用，当无法依靠用户直觉理解的时候，是需要作出解释的，也就是怎么禁的问题。

但是最开始设计时就应该去想的是，禁用状态对用户和产品的意义在哪里，这和我们设计方案时脑海中涌出的无数目标一样，是一个基础的出发点。而后，一切迎刃而解。