问题描述
我有一个带有文本输入,数字输入,选择和单选的表格。我试图禁用提交按钮,直到所有这些文件都被填充。我正在尝试所有不同的弃权,但始终存在问题。这就是我到目前为止 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一样,总是设置为空值
解决方法
try