jQuery 禁用提交按钮，直到选择要上传的文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4056336/
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
disable submit button until file selected for upload
提问by santa
I have a form for uploading images. I'd like to disable the submit button, until user selects an image to upload. I'd like to do it with jQuery. Currently I have a JavaScript function that prevent user from submitting the form more than once by disabling it on submit. It'd be nice to combine this functionality with the new one.
我有一个上传图片的表格。我想禁用提交按钮，直到用户选择要上传的图像。我想用jQuery来做。目前我有一个 JavaScript 函数，通过在提交时禁用它来防止用户多次提交表单。将此功能与新功能结合起来会很好。
Here's what I've got now:
这是我现在所拥有的：
<script type="text/javascript">
function submitonce(theform) {
//if IE 4+ or NS 6+
if (document.all || document.getElementById) {
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i = 0; i < theform.length; i++) {
var tempobj = theform.elements[i]
if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
//disable em
tempobj.disabled = true
}
}
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
<input type="file" name="my_field" value="" />
<input type="submit">
</form>
回答by David says reinstate Monica
The following seems to work reliably in Chrome and Firefox (Ubuntu 10.10), I'm unable to check on other platforms at the moment:
以下似乎在 Chrome 和 Firefox (Ubuntu 10.10) 中可靠运行，我目前无法在其他平台上检查：
jQuery
jQuery
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$('input:submit').attr('disabled',false);
// or, as has been pointed out elsewhere:
// $('input:submit').removeAttr('disabled');
}
}
);
});
html
html
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
<div id="result"></div>
回答by matt burns
Slightly simpler way using prop() which I think is the preferred way to do it now:
使用 prop() 的方法稍微简单一点，我认为这是现在的首选方法：
$('input:file').on("change", function() {
$('input:submit').prop('disabled', !$(this).val());
});
Tested in IE, Chrome and FireFox.
在 IE、Chrome 和 FireFox 中测试。
回答by Aaron Hathaway
Try
尝试
$('#my_uploader').change(function() {
if($(this).val()) {
$('#my_submit_button').attr('disabled', '');
} else {
$('#my_submit_button').attr('disabled', 'disabled');
}
});
回答by JayJay
If you're a fan of ternary expressions:
如果你是三元表达式的粉丝：
$(document).ready(function(){
var $submit = $('#submit_document');
var $file = $('#file_path');
$file.change(
function(){
$submit.attr('disabled',($(this).val() ? false : true));
}
);
});
回答by DJDave
Instead of disabling the submit, is it potentially more helpful to offer instruction if the user presses it without selecting a file first? So add something like this as the onclick code of the submit?
如果用户在没有先选择文件的情况下按下它，而不是禁用提交，提供指令是否可能更有帮助？那么添加这样的东西作为提交的onclick代码？
var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;
Note that your file control will need an ID as well as a name
请注意，您的文件控件将需要一个 ID 和一个名称
