Question

在这里，我编写了一个 jquery 代码来禁用按钮，直到所有必填字段都填满为止，这里我的代码工作正常，但它是一个多步表单，我在其中输入值，如果所有值都填满，我的按钮将启用但是如果我从下一个屏幕单击上一个按钮，那么如果我们输入任何内容，该按钮将再次进入禁用状态，然后它将处于活动状态。那么如果用户导航到上一个屏幕，那么如何防止这种情况发生，那么按钮不应处于禁用状态，而应处于活动状态。

html

<div>                   
    <input type="text" v-model.lazy="category" id="id_post_type">
    <input type="text" v-model="title" id="title">
    <input type="text" v-model="address" id="id_post_address">
    <button id="confirm_button_login" @click.prevent="next()" disabled="disabled">Next</button>
    
<div>

Jquery

$(document).ready(function (){
    $('#id_post_type, #title, #id_post_address').keyup(function(){
            if($("#id_post_type").val().length && $("#title").val().length && $("#id_post_address").val().length){
                    $("#confirm_button_login").prop('disabled', false);
                    $("#confirm_button_login").css("background-color", "#01ABAA");
            } else {
                    $("#confirm_button_login").prop('disabled', true);
            }
        });
    });

Answer 1

最简单的方法是在文档准备好时运行您的代码，而不仅仅是在键盘上。

所以你想把它移到一个函数中，你可以在页面加载时调用一次，在键盘上调用一次。

function is_form_complete() {
    if($("#id_post_type").val().length && $("#title").val().length && $("#id_post_address").val().length){
            $("#confirm_button_login").prop('disabled', false);
            $("#confirm_button_login").css("background-color", "#01ABAA");
    } else {
            $("#confirm_button_login").prop('disabled', true);
    }
};

$('#id_post_type, #title, #id_post_address').keyup(function(){
  is_form_complete()
});

$(document).ready(function (){
  is_form_complete()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>                   
  <input type="text" v-model.lazy="category" id="id_post_type">
  <input type="text" v-model="title" id="title">
  <input type="text" v-model="address" id="id_post_address">
  <button id="confirm_button_login" @click.prevent="next()" disabled="disabled">Next</button>
<div>

Answer 2

您必须检查禁用按钮

$(document).ready(function(){
    if($("#id_post_type").val().length && $("#title").val().length && 
    $("#id_post_address").val().length){
        $("#confirm_button_login").prop('disabled', false);
        $("#confirm_button_login").css("background-color", "#01ABAA");
    } else {
        $("#confirm_button_login").prop('disabled', true);
    }
});

如何禁用按钮，直到填写所有必填字段

2 个答案: