Звоните bootstrap оповещение с jquery

Question

Я пытаюсь вызвать bootstrap оповещение с jQuery во время встречи с некоторыми операторами if.

Вот мой код в 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>

здесь мой код для jQuery:

if ($("#checkbox1").prop('checked')==false){  
    $(".alert").addClass('in');
    return false;
}

Я хочу вызвать это предупреждение, пока один флажок c не установлен, как я писал выше.

Я также хочу упомянуть: я использовал $(".alert").hide();, чтобы скрыть мое оповещение при загрузке страницы - не уверен, что это правильно.

Я хочу знать, как вызвать это оповещение при соблюдении определенных c условий и как его правильно скрыть.

Спасибо

Answer 1

Это можно сделать, переключив атрибут отображения CSS, как показано ниже:

$("#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>

Answer 2

Добавьте d-none и удалите класс show, когда флажок установлен, поэтому эти два класса предопределены в 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>