禁用提交按钮，直到选择上传文件

我有一张上传图片的表格。 我想禁用提交按钮，直到用户选择要上传的图像。 我想用jQuery做。 目前我有一个JavaScript，阻止用户通过在提交时禁用它来多次提交表单。 将此function与新function结合起来会很不错。

这就是我现在所拥有的：

 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 } } }  
    

Answer 1

以下似乎在Chrome和Firefox（Ubuntu 10.10）中可靠运行，我现在无法检查其他平台：

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

JS Fiddle演示 。

Answer 2

使用prop（）稍微简单一些，我认为这是现在首选的方法：

 $('input:file').on("change", function() { $('input:submit').prop('disabled', !$(this).val()); }); 

在IE，Chrome和FireFox中测试过。

Answer 3

尝试

  $('#my_uploader').change(function() { if($(this).val()) { $('#my_submit_button').attr('disabled', ''); } else { $('#my_submit_button').attr('disabled', 'disabled'); } }); 

Answer 4

如果你是三元表达的粉丝：

 $(document).ready(function(){ var $submit = $('#submit_document'); var $file = $('#file_path'); $file.change( function(){ $submit.attr('disabled',($(this).val() ? false : true)); } ); }); 

Answer 5

如果用户在不先选择文件的情况下按下它，那么提供指令可能会更有帮助而不是禁用提交吗？ 所以添加这样的东西作为提交的onclick代码？

 var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty; 

请注意，您的文件控件将需要ID和名称