如果输入和复选框不为空,请启用提交按钮

问题描述:

下面我试图确保我的复选框和输入在允许用户提交之前全部填满。它忽略了我对复选框的检查,并在填充字段后打开提交。我究竟做错了什么?如果输入和复选框不为空,请启用提交按钮

$('#first, #last, #pass').bind('keyup', function() { 
    if (allFilled()) $('#register').removeAttr('disabled'); 
}); 

function allFilled() { 
    var filled = true; 

    console.log($('#checkbox').prop('checked')) 

    $('body input').each(function() { 
     if ($(this).val() == '' && $('#checkbox').prop('checked') == false) filled = false; 
    }); 

    return filled 
}; 

HTML:

<body> 
    <form> 
    Username 
    <br /> 
    <input type="text" id="first" name="first" /> 
    <br /> First 
    <br /> 
    <input type="text" id="last" name="last" /> 
    <br /> Last 
    <br /> 
    <input type="text" id="pass" name="pass" /> 
    <br /> Password 
    <br /> 
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" /> 
    <br /> 
    <input type="submit" id="register" disabled value="Register" /> 
    </form> 
    <div id="test"> 
    </div> 
</body> 
+0

看到你的HTML将是有益的。 [MCVE]。你也应该使用'.on()'而不是'.bind()' – j08691

+0

从jQuery 3.0开始,.bind()已被弃用。它已经被.on()方法取代,用于将事件处理程序自jQuery 1.7附加到文档,因此它的使用已经不受欢迎。 –

+0

可能的重复[如何检查复选框是否在jQuery中检查?](http://*.com/questions/901712/how-do-i-check-if-a-checkbox-is-checked-in -jquery) –

在jQuery 3.0,.bind()已被弃用。它已经被.on()方法取代,用于将事件处理程序自jQuery 1.7附加到文档,因此它的使用已经不受欢迎。

请不要使用该方法已过时bind()使用on()代替:

$('#first, #last, #pass').on('keyup', function() { 
    if (allFilled()) $('#register').removeAttr('disabled'); 
}); 

希望这有助于。

$('#first, #last, #pass').on('keyup', function() { 
 
    if (allFilled()) $('#register').removeAttr('disabled'); 
 
}); 
 

 
function allFilled() { 
 
    var filled = true; 
 

 
    $('body input').each(function() { 
 
    if ($(this).val() == '' && $('#checkbox').prop('checked') == false) filled = false; 
 
    }); 
 
    return filled 
 
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    Username 
 
    <br /> 
 
    <input type="text" id="first" name="first" /> 
 
    <br /> First 
 
    <br /> 
 
    <input type="text" id="last" name="last" /> 
 
    <br /> Last 
 
    <br /> 
 
    <input type="text" id="pass" name="pass" /> 
 
    <br /> Password 
 
    <br /> 
 
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" /> 
 
    <br /> 
 
    <input type="submit" id="register" disabled value="Register" /> 
 
</form> 
 
<div id="test"> 
 
</div>