我想在 4 个输入字段为空时禁用提交按钮
<input type="text" name="val1" id="val1">
<input type="text" name="val2" id="val2">
<input type="text" name="val3" id="val3">
<input type="text" name="val4" id="val4">
提交按钮
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />
我正在使用
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sendButton').attr('disabled',true);
$('#val1').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val2').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val3').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val4').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
});
</script>
我认为我使用错误。我将所有 id 放在一个函数中。
$('#val1','#val2','#val3','#val4').keyup(function(){
此代码不起作用。任何建议。如何在这些函数中使用 & 和条件(val1 &val2 & val3 &val4)?.
最佳答案
我尝试解决这个问题的方法是这样的:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$("#val1").keyup(function(event) {
validateInputs();
});
$("#val2").keyup(function(event) {
validateInputs();
});
$("#val3").keyup(function(event) {
validateInputs();
});
$("#val4").keyup(function(event) {
validateInputs();
});
function validateInputs(){
var disableButton = false;
var val1 = $("#val1").val();
var val2 = $("#val2").val();
var val3 = $("#val3").val();
var val4 = $("#val4").val();
if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
disableButton = true;
$('.sendButton').attr('disabled', disableButton);
}
</script>
这样,您将有一个地方来检查您的逻辑,并且如果您稍后决定添加更多输入,则不必在 N 个位置维护它。更好的解决方案是为您的输入提供相同的类,这样您就可以执行类似的操作
$(".myInputs").keyup(function(event){
validateInputs();
});
这是一个 jsFiddle 示例:https://jsfiddle.net/moj2dnup/
关于javascript - 当输入字段为空时禁用提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52774285/