禁用提交按钮，直到填写所有字段

Question

我有一个带有文本输入、数字输入、选择和单选的表单。我正在尝试禁用提交按钮，直到所有这些文件都被填满。我正在尝试所有不同的方式，但总是有问题。这是我到目前为止所拥有的 html:

<div id= "name">
        <div class="form-e">
        <label for="fname">First name:</label>
        <input type="text" placeholder="Enter your first name" id="fname" name="fname" class="text"><br>  
        </div>
        <div class="form-e">    
        <label for="lname">Last name:</label>
        <input type="text" id="lname" placeholder="Enter your last name" name="lname" class="text"><br> 
        </div>
        </div>
        
        <div id = "city" class="form-e">
        <label for="city">City</label>
        <select name="city" id="city">
            <option value="" disabled selected>Choose a city</option>
            <option value="new-york" id = "new-york">New York City, NY</option>
            <option value="philadelphia" id = "philadelphia">Philadelphia, PA</option>
            <option value="scranton" id = "scranton">Scranton, PA</option>
        </select> 
        </div>

        <div id = "schedule" class= "form-e">
       <div id="side1"> <label>Prefered Schedule: </label><br></div>
            <div id = "side2">
            <div class = "inline">
            <input type="radio" id = "part-time" name="schedule" value="part-time">
            <label for="part-time">Part-Time</label><br>
            </div>
            <div class = "inline">       
            <input type="radio" id = "full-time" name="schedule" value="full-time">
            <label for="full-time">Full-Time</label><br>
            </div>
            </div>
        </div>
        
        <div class = "form-e" >
            <label for="amount">Amount of children for care:</label>
            <input type="number" class = "number" id="amount" name="amount" min = "0">
        </div>

jQuery:

let allInput = $('#fname, #lname, #amount, #city, input[name = "schedule"]:checked');

allInput.on('change', function(e){
    e.preventDefault();
    let validateForm = false;
    $.each(allInput, function(){
        
        console.log($(this).val());
        if ($(this).val()===''){
            validateForm = true;
        }   
    });
    console.log(validateForm);
    if (validateForm){
        $('#s-button').prop('disabled', true);
    }   
    else{
        $('#s-button').prop('disabled', false);
    }
      
});

就像 select 和 radio 一样总是设置为空值

Answer 1

//target all required fields
        let allInput = $('#fname, #lname, #full-time, #amount, #part-time, #city');
        //on change prompt this function 
        allInput.on('change', function(e){
            //prevent deafault
            e.preventDefault();
            //these are if nested statements making sure all the fields required are not empty 
            //if fname, lname, and amount fileds are not empty 
            if ($('#fname').val()!=='' && $('#lname').val()!== '' && $('#amount').val()!==''){
                //if either part time or full time are chcked
                if ($('#full-time').is(':checked')||$('#part-time').is(':checked')){
                    //if the option selected has a value
                    if ($('select option:selected').val().length >0){
                        //enable the submit button 
                        $('#s-button').prop('disabled', false);
                    }
                }
            }
        });