jQuery，添加类按钮，如果所有的输入都不是空的

jQuery , add class to button if all inputs are not empty

本文关键字：输入 添加 按钮 如果 jQuery      更新时间：2023-09-26

我不是javascript最好的，我有麻烦，使我的表单禁用，除非我所有的输入字段不是空的。

我会添加其他东西，比如确保电子邮件是电子邮件，密码至少是8等。，但现在我只想让它工作，如果所有的输入不是空的，条款和条件复选框被选中。

这是我的代码:

$('.m-name').keyup(function(){monthlyButtonActive();});
$('.m-email').keyup(function(){monthlyButtonActive();});
$('.m-password').keyup(function(){monthlyButtonActive();});
$('.m-password-confirm').keyup(function(){monthlyButtonActive();});
$('.m-terms').change(function(){monthlyButtonActive();});
function monthlyButtonActive()
{
    var complete = 0;
    if($('.m-name').val().length > 2){
        complete++;
    }else{
        complete = 0
    }
    if($('.m-email').val().length > 2){
        complete++;
    }else{
        complete = 0
    }
    if($('.m-password').val().length > 2){
        complete++;
    }else{
        complete = 0
    }
    if($('.m-password-confirm').val().length > 2){
        complete++;
    }else{
        complete = 0
    }
    if($('.m-terms').is(':checked')){
        complete++;
    }else{
        complete = 0
    }
    if(complete == 5){
        console.log(complete);
        console.log('its now complete');
        $('.monthly-button').children('.orange-button').addClass('active-button');
    }else{
        $('.monthly-button').children('.orange-button').addClass('active-button');
    }

所以如果所有的字段都不是空的，我添加一个类到按钮的'。Active-button '，如果没有，我想学习一下。但是它也不是我想要的那样工作。

有谁能帮帮我吗?

谢谢

如果字段为空，则您将遇到问题，因为您使complete=0。你不应该做任何事。如果不为空，则引发complete变量，否则complete保持不变。

$('.m-name').keyup(function(){monthlyButtonActive();});
$('.m-email').keyup(function(){monthlyButtonActive();});
$('.m-password').keyup(function(){monthlyButtonActive();});
$('.m-password-confirm').keyup(function(){monthlyButtonActive();});
$('.m-terms').change(function(){monthlyButtonActive();});
function monthlyButtonActive()
{
    var m_name=0,m_email=0,m_password=0,m_password_confirm=0,m_terms=0;
    if($('.m-name').val().length > 2){
        m_name=1;
    }
    if($('.m-email').val().length > 2){
        m_email=1;
    }
    if($('.m-password').val().length > 2){
        m_password=1;
    }
    if($('.m-password-confirm').val().length > 2){
        m_password_confirm=1;
    }
    if($('.m-terms').is(':checked')){
        m_terms=1;
    }
    if(m_name==1&&m_email==1&&,m_password==1&&m_password_confirm==1&&m_terms==1){
        console.log(complete);
        console.log('its now complete');
        $('.monthly-button').children('.orange-button').addClass('active-button');
    }else{
        console.log(complete);
        console.log('its not complete');
    }

$('.m-name').keyup(function(){monthlyButtonActive();});
$('.m-email').keyup(function(){monthlyButtonActive();});
$('.m-password').keyup(function(){monthlyButtonActive();});
$('.m-password-confirm').keyup(function(){monthlyButtonActive();});
$('.m-terms').change(function(){monthlyButtonActive();});
function monthlyButtonActive()
{
    var complete = 1;
    if($('.m-name').val().length<=2){           
        complete = 0
    }
    else if($('.m-email').val().length <=2){           
        complete = 0
    }
    else if($('.m-password').val().length<=2){          
        complete = 0
    }
    else if($('.m-password-confirm').val().length <=2){           
        complete = 0
    }
    else if($('.m-terms').is(':checked')==false){            
        complete = 0
    }
    if(complete == 1){
        console.log(complete);
        console.log('its now complete');
        $('.monthly-button').children('.orange-button').removeClass('deactive-button').addClass('active-button');
    }else{
        $('.monthly-button').children('.orange-button').removeClass('active-button').addClass('deactive-button');
    }
相关文章：