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一样，总是设置为空值

禁用提交按钮，直到所有字段都变为空

1 个答案: