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

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() {

  $('#exampleModal').on('hidden.bs.modal', function (e) {

    $('#ID12').val('')

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

  })

  $('#exampleModal').on('hide.bs.modal', 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 {

        }

    }

  })

});

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

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

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

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        <input type="file" 

         id="ID12" 

         name="avatar"

         value=""

         />

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

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>