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

Question

我有一个用于上传图像的表单。我想禁用提交按钮，直到用户选择要上传的图像。我想用 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>

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

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Demo at JS Fiddle .