登录按钮的禁用和启用

听到登录框，大家脑子应该立马有了个模型。不管是在一些网页登录还是一些App客户端登录，它们的登录框架都差不多，也有各种的特点和一些不同的地方，但也有相同的地方。例如下面要讲的：

很多页面登录或者软件登录的时候，都会有自己的《服务条款》、《隐私通知》等，所以一般就会有个复选框让你勾选，你不勾选就无法登录，只有勾选才能点击登录。这就是登录按钮的禁用与启用。

1、首先我们先简单搭建应该登录框架。代码和效果如下图所示：

    

上面代码简单搭建了一个登录框，

可以看到在没有勾选的时候，登录按钮是处于禁用状态的，这是因为在登录按钮上添加了一个类（disabled），也就是说默认是没有勾选的，登录按钮就是禁用状态，当然也可以修改成默认状态勾选了，就移除这个类（disabled），登录按钮就是启用状态了。

2、从上面代码我们可以知道，是通过一个类的添加和移除来控制登录按钮的状态。所以下面我们要将这个关系和复选框联系起来，就要通过JS代码来实现了。代码如下图所示：

图中代码主要就是通过判断类的有无，来添加或移除类。这里需要注意的是代码中是通过判断checked这个类是否存在，再添加或移除类，也就是禁用或启用。而实际上这个类是没有定义的，只是作为辅助当一个判断条件来使用。

注：checkbox复选框是通过属性checked来决定是否选中的。

下面看效果图：

可以看到效果，当年没有勾选的时候，登录按钮就是禁用状态，勾选中的时候，才是启用状态。这样就简单实现了登录按钮的禁用和启用了。