javascript 在多个文本框中输入值时启用/禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17019037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/disable a button on entering the values in multiple textboxes
提问by punit jain
I have five text boxes and a submit button.
我有五个文本框和一个提交按钮。
By default, my submit button is disabled.
默认情况下，我的提交按钮被禁用。
I want that, on filling the values in all the text boxes, button should be enabled.
我希望在填充所有文本框中的值时，应启用按钮。
button should not enable after filling only some text boxes.
仅填充一些文本框后不应启用按钮。
回答by MrCode
jQuery Solution
jQuery 解决方案
function doCheck(){
var allFilled = true;
$('input[type=text]').each(function(){
if($(this).val() == ''){
allFilled = false;
return false;
}
});
$('input[type=submit]').prop('disabled', !allFilled);
}
$(document).ready(function(){
$('input[type=text]').keyup(doCheck).focusout(doCheck);
});
Plain Javascript Solution
简单的 Javascript 解决方案
This requires the submit button have an ID of mysubmit:
这要求提交按钮的 ID 为mysubmit：
function doCheck(){
var allFilled = true;
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
if(inputs[i].type == "text" && inputs[i].value == ''){
allFilled = false;
break;
}
}
document.getElementById("mysubmit").disabled = !allFilled;
}
window.onload = function(){
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
if(inputs[i].type == "text"){
inputs[i].onkeyup = doCheck;
inputs[i].onblur = doCheck;
}
}
};
回答by jcubic
You can use code like this:
你可以使用这样的代码：
var inputs = $('input');
inputs.keypress(function() {
var count = 0;
inputs.each(function() {
if ($(this).val()) {
count++
}
});
if (count === inputs.length-1) {
// enable the button
} else {
// disable the button so it will be disabled if someone remove the text
}
});
回答by Lepanto
If your code happens to be like below
如果您的代码恰好如下所示
<form name="urfrm">
<input type="text" value="" name="tbox1" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox2" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox3" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox4" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox5" class="txtboxtocheck"><br>
<input type="submit" id="butn" name="butn" value="POST VAL" disabled><br>
</form>
<script>
By using jquery you can determine whether text boxes are empty or filled using below code and enable / disable the submit button
通过使用 jquery，您可以使用以下代码确定文本框是空还是填充，并启用/禁用提交按钮
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(".txtboxtocheck").change(function(){
var enablebtn = true;
$(".txtboxtocheck").each(function(){
if($(this).val() == '')
enablebtn = false;
});
if(enablebtn)
$("#butn").attr('disabled',false);
else
$("#butn").attr('disabled',true);
});
</script>
Below is plain javascript that check if text boxes are empty to enables / disables
下面是检查文本框是否为空以启用/禁用的普通 javascript
<form name="urfrm">
<input type="text" value="" name="tbox1" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox2" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox3" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox4" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox5" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="submit" id="butn" name="butn" value="POST VAL" disabled><br>
</form>
Javascript to check
要检查的 JavaScript
<script>
function checktxtbox(){
if(document.urfrm.tbox1.value != '' && document.urfrm.tbox2.value != '' && document.urfrm.tbox3.value != '' && document.urfrm.tbox4.value != '' && document.urfrm.tbox5.value != ''){
document.urfrm.butn.disabled=false;
}
else{
document.urfrm.butn.disabled=true;
}
}
</script>
