如果模态已关闭，则清除输入类型文件值，并且应禁用“保存所有更改”按钮

Question

你好吗 ？我正在开发一个简单的项目，我想在我的应用程序中做一个简单的技巧。如果模态已关闭，我想清除输入类型文件值 ，这意味着如果用户决定取消上传并关闭模态，我想将输入值重置为空，并且如果该值是，则应禁用“保存所有更改”按钮空的 ....

HTML 代码：

<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">

<div class="modal-dialog modal-dialog-scrollable" role="document">

<div class="modal-content">

<div class="modal-body">

   <div class="uploadavatar">

        <input type="file" 

               class="custom-file-input" 

               id="ID12" 

               name="avatar"

               value=""

               hidden />

        <label role="button" class="btn" for="ID12">

            Upload Now

        </label>

    </div>

</div>

<div class="modal-footer">

<button type="submit" class="btn btn-primary" id="button1" disabled>Save All changes</button>

</div>

</div>

</div>

</div>

JS代码：

$(document).on('shown.bs.modal', '#modal_a', function() {

    if ($(this).hasClass('show')) {

        $('#ID12').on('change', function() {

            if ($(this).val() == '') {

                $('#button1').prop('disabled', true);

            } else {

                $('#button1').prop('disabled', false);

            }

            $(this).attr('value', $(this).val());

        });

    }

});

$(document).on('hide.bs.modal', '#modal_a', function(e) {

    if ($('#ID12').val() != '') {

        const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');

        if (!CancelUpdateConfirmation) {

            e.preventDefault();

        } else {

        }

    }

});

Answer 1

像这样。$( document ).ready(function() {&nbsp; $('#exampleModal').on('hidden.bs.modal', function (e) {&nbsp; &nbsp; $('#ID12').val('')&nbsp; &nbsp; $('#button1').prop('disabled', true);&nbsp; })&nbsp; $('#exampleModal').on('hide.bs.modal', function (e) {&nbsp; &nbsp; &nbsp; if ($('#ID12').val() != '') {&nbsp; &nbsp; &nbsp; &nbsp; const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');&nbsp; &nbsp; &nbsp; &nbsp; if (!CancelUpdateConfirmation) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; })});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">&nbsp; Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <input type="file"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id="ID12"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="avatar"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="submit" class="btn btn-primary" id="button1">Save All changes</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-primary">Save changes</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>