一、效果展示

在这里插入图片描述

二、思路分析

1. 在输入框都不为空且勾选协议的情况下改变登录按钮的状态。
1. 需要在输入框输入和修改勾选按钮是进行判断
1. 可以封装一个函数进行相应的调用

三、jQuery语句

封装的函数 (根据自己的布局结构进行相应的代码修改)

 function Code() {
        if (inx == 0) {
            if ($(".login-main .focus").eq(0).val() != '' && $(".login-main .focus").eq(1).val() != '' && $(".login-main .checkbox").prop("checked")) {
                $(".login").css({ "background": '#ff6900', "cursor": 'pointer' });
                return true;
            } else {
                $(".login").css({ "background": '#ffbe99', "cursor": '' });
            }
        } else {
            if ($(".register-main .focus").eq(0).val() != '' && $(".register-main .focus").eq(1).val() != '' && $(".register-main .checkbox").prop("checked")) {
                $(".register").css({ "background": '#ff6900', "cursor": 'pointer' });
                return true;
            } else {
                $(".register").css({ "background": '#ffbe99', "cursor": '' });
            }
        }
    }

在输入框键入时和修改勾选状态时调用。

 // 3. 输入框效果
    $(".focus").on({
        focus: function() {
            $(this).addClass("change")
            .siblings(".meg").stop().animate({
                top: 8,
                fontSize: 12
            }, 200);
        },
        blur: function() {
            if ($(this).val() != "") {
                $(this).removeClass("change")
                .siblings(".erron").stop().fadeOut(200);
            } else {
                $(this)
                .removeClass("change")
                .addClass("blur")
                .siblings(".meg").removeClass("color")
                .addClass("becolor").stop().animate({
                    top: 20,
                    fontSize: 16,
                }, 200)
                .siblings(".erron").stop().fadeIn(200);
            }

        },
        keydown: function() {
            $(this).removeClass("blur")
            .siblings(".meg").removeClass("becolor")
            .addClass("color")
            .siblings(".erron").stop().fadeOut(200);
            Code();
        }
    });
 // 6.判断登录条件
    $(".checkbox").change(function() {
        Code();
    });
    $(".login").on("click", function() {
        if (Code()) {
            alert("登录成功!!!!");
        }
    });
    $(".register").on("click", function() {
        if (Code()) {
            alert("注册成功!!!!");
        }
    });