我有一张上传图片的表单。我想禁用提交按钮,直到用户选择要上传的图像。我想用jQuery做。目前我有一个JavaScript,阻止用户通过在提交时禁用它来多次提交表单。将此功能与新功能结合起来会很不错。
这就是我现在所拥有的:
<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>
答案 0 :(得分:44)
以下内容似乎在Chrome和Firefox(Ubuntu 10.10)中可靠运行,我目前无法检查其他平台:
$(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');
}
}
);
});
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
<div id="result"></div>
答案 1 :(得分:16)
使用prop()稍微简单一些,我认为这是现在首选的方法:
$('input:file').on("change", function() {
$('input:submit').prop('disabled', !$(this).val());
});
在IE,Chrome和FireFox中测试。
答案 2 :(得分:4)
尝试
$('#my_uploader').change(function() {
if($(this).val()) {
$('#my_submit_button').attr('disabled', '');
} else {
$('#my_submit_button').attr('disabled', 'disabled');
}
});
答案 3 :(得分:1)
如果你是三元表达的粉丝:
$(document).ready(function(){
var $submit = $('#submit_document');
var $file = $('#file_path');
$file.change(
function(){
$submit.attr('disabled',($(this).val() ? false : true));
}
);
});
答案 4 :(得分:0)
代替禁用提交,如果用户在未先选择文件的情况下按了它,提供指示可能会更有帮助吗?因此,添加诸如此类的内容作为提交的onclick代码吗?
var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;
请注意,您的文件控件将需要ID和名称