You can do this via toggling the CSS display attribute as below:
$("#triggerAlert").change(function() {
if (this.checked) {
$('#myAlert').css('display', 'none');
} else {
$('#myAlert').css('display', 'block');
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Hide alert: <input type='checkbox' id='triggerAlert' />
<div class="alert alert-warning fade show" role="alert" id="myAlert">
<h4 class="alert-heading">Attention</h4>
<p>You haven't select the metrial you need</p>
<hr>
<p class="mb-0">Are you going to check next step anyway?</p>
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-secondary">No</button>
</div>
<p>something after</p>
Add d-none and remove show class when checkbox is checked so these two classes are predefined in Bootstrap4.
$('#checkbox1').on('change', function(){
if($(this).is(':checked')) {
$('#myAlert').removeClass('show').addClass('d-none');
}
else {
$('#myAlert').removeClass('d-none').addClass('show');
}
});
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container my-3">
<div class="row">
<div class="col-sm-12">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox1">
<div class="custom-control-label">Are you sure?</div>
</label>
<div class="alert alert-warning fade show" role="alert" id="myAlert">
<h4 class="alert-heading">Attention</h4>
<p>You haven't select the metrial you need</p>
<hr>
<p class="mb-0">Are you going to check next step anyway?</p>
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-secondary">No</button>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat.
</p>
</div>
</div>
</div>
I’m trying to call a bootstrap alert with jQuery while meeting some if statements.
Here is my code in HTML:
<div class="alert alert-warning fade" role="alert" id="myAlert">
<h4 class="alert-heading">Attention</h4>
<p>You haven't select the metrial you need</p>
<hr>
<p class="mb-0">Are you going to check next step anyway?</p>
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-secondary">No</button>
</div>
here is my code for jQuery:
if ($("#checkbox1").prop('checked')==false){
$(".alert").addClass('in');
return false;
}
I want to call this alert while one specific checkbox is not checked as I wrote above.
I also want to mention: I used $(".alert").hide(); to hide my alert when the page is loaded – not sure if that’s correct.
I want to know how to call this alert when specific conditions are met and how to hide it properly.
Thanks
