[英]How to uncheck all checkboxes when i close a modal?
I want to pop up a modal on clicking the checkbox. 我想点击复选框弹出一个模态。 And wants to uncheck it when I close a modal automatically. 并且当我自动关闭模态时想要取消选中它。
I tried both attr and prop methods. 我尝试了attr和prop方法。 None of them worked. 他们都没有工作。
//uncheck all when modal closes
$(document).on('click', '#closeInvoiceModal', function() {
$('.creditCheckbox').prop('checked', false);
});
This was expected to uncheck all the checkboxes having the same class '.creditCheckbox'. 预计这将取消选中具有相同类'.creditCheckbox'的所有复选框。 But none of them didn't close. 但他们都没有关闭。
<td>
<input type="checkbox" id="invoiceDetail{{$loop->iteration}}"
name="invoiceDetail{{$loop->iteration}}"
class="filled-in chk-col-green invoiceCheckbox"
data-campaignId="{{$item['id']}}"/>
<label class="invoiceDetailLink" for="invoiceDetail{{$loop-
>iteration}}">Inv. Details</label>
</td>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect
pull-right" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Please use this code I hope it's work for you. 请使用此代码我希望它对您有用。
Thanks 谢谢
$(document).ready(function(){
$("#myModal").on('hide.bs.modal', function(){
$('.creditCheckbox').prop('checked', false);
});
});
I have to make an example like your code, please review once, hope it will help you, it is working for me. 我必须像你的代码一样做一个例子,请复习一次,希望它能帮到你,它对我有用。 Thanks. 谢谢。
<div class="container">
<input type="checkbox" name="check" class="checkOption"> check 1
<input type="checkbox" name="check" class="checkOption"> check 2
<input type="checkbox" name="check" class="checkOption"> check 3
<input type="checkbox" name="check" class="checkOption"> check 4
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cbreInvoiceDetailsModal">Open Modal</button>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#cbreInvoiceDetailsModal").on('hide.bs.modal', function(){
$('.checkOption').prop('checked', false);
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.