引导程序：即使禁用按钮，也会显示模态

Question

危险的！

我已将bootstrap-modal放置在页面上，作为一种Apply-remove对话框，当禁用remove-button（不是模式中的一个；有两个remove-button）时，该模式可能不会出现（当尝试从数据库中删除记录时）。我了解您可以删除data-toggle我的“删除”按钮的属性（不是按钮，而是span实际上的按钮），但是没有别的选择吗？我猜是因为span保持“启用”状态？但是如何“禁用跨度”？好的，听起来“不健康”，但是我需要span使用，因为我将data-toggle按钮的属性用于tooltip。

以下是我使用的脚本和样式：

<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" />

---

这是我的按钮：

<!-- 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>

---

这是我的模态：

<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 1

如果您删除禁用的类，它将开始工作。编辑：

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