Question

危险！

我已经将一个bootstrap-modal放在我的页面上作为一种 apply-remove对话框，当删除按钮（不是模态上的那个;有两个）禁用删除按钮，模式可能不会出现（尝试从数据库中删除记录时）。我了解到您可以删除我的删除按钮的data-toggle属性（不是按钮，而是实际为span），但是还有其他选项吗？我猜是因为span停留＆＃34;启用＆＃34;？但是如何＆＃34;禁用跨度＆＃34;？好的，它听起来不健康＆＃34;但我需要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>

Answer 2

你可以像这样打开弹出窗口

 <span id="spanMDL">
        <button id="btn-remove-all" type="button" class="btn btn-danger" 
            disabled="disabled" title="Remove" data-toggle="tooltip"></button>
    </span>

在js代码中

    $("#spanMDL").click(function(){
       if(!$("#btn-remove-all").is(':disabled')){ //check if button is disabled or not
       $("#applyRemoveDialog").modal('show');//show modal
      }
    });

Bootstrap：即使禁用按钮，模态也会显示

2 个答案: