你好嗎 ？我正在開發一個簡單的項目，我想在我的應用程序中做一個簡單的技巧。如果模態已關閉，我想清除輸入類型文件值 ，這意味著如果用戶決定取消上傳并關閉模態，我想將輸入值重置為空，并且如果該值是，則應禁用“保存所有更改”按鈕空的 ....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 { } }});
1 回答
Smart貓小萌
TA貢獻1911條經驗 獲得超7個贊
像這樣。
$( 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">×</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>
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消