在特定情况下关闭模态bootstrap4

Question

I want to disable modal. if there're more than 1 checkboxes that checked and allow modal when only 1 checkboxes that checked. At now, when i clicked button modal it just pop-up without error. but, it just allow always.

<input type="checkbox" id="check-all">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">

<button id="btn-edit" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    EDIT
</button>
<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">TEMPLATE MESSAGE</h5>
                <button id="btn-close" type="button" class="close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="">
                    <div class="form-group">
                        <textarea id="value-message" type="text" class="form-control" name="template-message" placeholder="Message"></textarea>
                    </div>
                    <div class="row">
                        <div class="col">
                            <button id="btn-save" class="btn btn-primary">Save</button>
                        </div>
                        <div class="col text-right">
                            <span id="length-message"></span><span> / 160</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

$("btn-edit").click(function(){
  var checkLength = 0;

  for(var i = 0; $('.check').length; i++){
    checkLength += 1;
  }

  if(checkLength > 1){
     $(".modal").on("shown.bs.modal", function(){
       $(".modal").modal("hide");
     });
  }else{
     $(".modal").modal("show");
  }   
});

Answer 1

FIRST: btn-edit is an ID you should call it with #btn-edit

SECOND: for getting checked checkboxes length for specific class you should use:

$('input:checkbox.check:checked')

THIRD: You don't need a for loop for this since the code above will give you the amount of checked checkboxes.

FORTH: Here is a sample near to your code:

 $("#btn-edit").click(function(){ if($('input:checkbox.check:checked').length > 1){ $(".info").html("More than 1! The modal will not show"); $(".modal").hide(); } else if ($('input:checkbox.check:checked').length == 1){ $(".info").html("ONLY ONE CHECKBOX CHECKED. The modal will show!"); $(".modal").show(); } else{ $(".info").html("No Checkbox checked. The modal will not show!"); $(".modal").hide(); } }); 

 .info { border: 1px solid green; } .modal { margin-top: 5px; border: 1px solid blue; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="check-all"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> <button id="btn-edit" type="button" class="btn btn-primary"> EDIT </button> <div class="info"> Check the checkboxes! </div> <div class="modal"> I only show if ONLY one checkbox is checked. </div>