Отключена кнопка для входного файла .NET Razor

Мне нужно, чтобы пользователь мог загрузить файл, и как только файл будет загружен, мне нужно, чтобы кнопка отправки стала включена. У меня есть этот код, но почему-то он не работает.

                @using (Html.BeginForm("UploadChangedDocument", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
                {
                    @Html.Hidden("documentId", item.DocumentId)
                    <div class="form-group">
                        <label for="file" class="control-label col-md-4">Upload Edited Document:</label>
                        <div class="col-md-8 upload-block">
                            <input type="file" name="file" id="InputFile" />
                        </div>
                        <br />
                    </div>

                    <div class="form-group">
                        <label for="file" class="control-label col-md-4">Submit Edited Document:</label>
                        <div class="col-md-8 upload-block">
                            <button id="upload-btn" type="button blue-button" class="btn blue-button" disabled="">Submit</button>
                        </div>
                    </div>

                }

Это мой код Jquery

<script>
    $('.upload-block input').change(function () {
        $('#upload-btn').prop('disabled', !($('#InputFile').val()));
    });
</script>

Что-то не так с этим кодом? Есть ли лучший способ сделать это? Загрузив документ, #InputFile получит значение, включающее кнопку Отправить, верно?

Я также должен добавить, что это генерируется для многих документов, поэтому каждый документ должен иметь возможность быть загружен отредактирован и отправлен.

1 ответ

  1. Для тех, кто ищет способ eitering через документы редактирования и загрузки их вот формула, которую вы можете использовать

    @using (Html.BeginForm("UploadChangedDocument", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
                    {
                        @Html.Hidden("documentId", item.DocumentId)
                        <div class="form-group">
                            <label for="file" class="control-label col-md-4">Upload Edited Document:</label>
                            <div class="col-md-8">
                                <input type="file" name="file" id="InputFile-@count.ToString()" />
    
                            </div>
                            <br />
                        </div>
    
                        <div class="form-group">
                            <label for="file" class="control-label col-md-4">Submit Edited Document:</label>
                            <div class="col-md-8">
                                <input id="upload-btn-@count.ToString()" type="submit" class="btn blue-button" disabled="" />
                            </div>
                        </div>
    
                        <script>
                            $(document).ready(
                                function () {
                                    $('#InputFile-@count.ToString()').change(
                                        function () {
                                            if ($(this).val()) {
                                                $('#upload-btn-@count.ToString()').attr('disabled', false);
                                                // or, as has been pointed out elsewhere:
                                                // $('input:submit').removeAttr('disabled'); 
                                            }
                                        }
                                    );
                                });
                        </script>
                    }