LowLevel LowLevel - 5 months ago 11
jQuery Question

Bootstrap: Modal shows even when button disabled

Dangerous!

I've put a bootstrap-modal onto my page as a kind-of apply-remove dialog, and when the remove-button (not the one on the modal; there are two remove-buttons) is disabled, the modal may not appear (when trying to remove records from database). I understand you can remove

data-toggle
property of my remove button (not a button but the
span
actually), but isn't there another option to do it? I guess it's because the
span
stays "enabled"? But how to "disable the span"? Okay, it sounds "unhealthy", but I need the
span
because I use the
data-toggle
attribute of my button for a
tooltip
.

Here are the scripts and styles I use:

<script type="text/javascript" src='/blablabla/browser/bootstrap/js/jquery.min.js'></script>
<script type="text/javascript" src='/blablabla/browser/bootstrap/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="/blablabla/browser/bootstrap/css/bootstrap.min.css" type="text/css" />





Here is my button:

<!-- Button trigger modal -->
<span data-toggle="modal" data-target="#applyRemoveDialog">
<button id="btn-remove-all" type="button" class="btn btn-danger"
disabled="disabled" title="Remove" data-toggle="tooltip"></button>
</span>





And here is my modal:

<div class="modal fade" id="applyRemoveDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Apply Removal</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-remove" name="remove" type="submit" class="btn btn-danger" value="">Remove</button>
</div>
</div>
</div>
</div>

Answer

See the Working Demo, if you remove class disabled it will start working. EDITED:

 $(".btn").on("click", function (event) {         
            if ($(this).hasClass("disabled")) {
                event.stopPropagation()
            } else {
                $('#applyRemoveDialog').modal("show");
            }
        });
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->

    <button id="btn-remove-all" type="button" class="btn btn-danger disabled" 
         title="Remove" data-toggle="modal">Text 1</button>

 <button id="btn-remove-all" type="button" class="btn btn-danger" 
         title="Remove" data-toggle="modal">Text 2</button>


<div class="modal fade" id="applyRemoveDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Apply Removal</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="btn-remove" name="remove" type="submit" class="btn btn-danger" value="">Remove</button>
      </div>
    </div>
  </div>
</div>