Bootstrap: Modal shows even when button disabled

Question

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>

Solution

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>

Comments

[Muhammad Atif]

any error in console? as it is working fine at my end

[Muhammad Atif]

have you include js files?

[LowLevel]

yeah, I've put there console.log('hello'), it appears. but the button still shows the modal. It really does.

[Muhammad Atif]

try this in console alert($("#btn-remove-all").attr('class'));

[Muhammad Atif]

have you removed data-toggle="modal" data-target="#applyRemoveDialog" from span in html?

[LowLevel]

nope. It says: The page at localhost:8080 says and then I click Ok and it shows the modal.

[LowLevel]

Muhammad Atif, no, I haven't. I can't do it. The remove-all button enables/disables because of different reasons and it will be a huge work with lots of questions to go through all those actions and see when those attributes may be added, and when removed.

[LowLevel]

Try to click in the MIDDLE of the button, then the modal still appears.

[TonyH]

This seems to only work because the variable e is not defined and the if-block throws an exception. Any ideas on how to make this work correctly?