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

Question

危险！

我在我的页面上放置了一个 bootstrap-modal 作为一种 apply-remove 对话框，当删除按钮（不是那个在模态上；有两个删除按钮）被禁用，模态可能不会出现（当试图从数据库中删除记录时）。我知道您可以删除我的删除按钮的 data-toggle 属性（实际上不是按钮，而是 span），但是没有其他选择吗？我想这是因为 span 保持 "enabled"？但是如何"disable the span"？好的，听起来 "unhealthy"，但我需要 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

你可以这样打开弹窗

 <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
      }
    });

Answer 2

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

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

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

Bootstrap: Modal shows even when button disabled

jquery

modal-dialog

disabled-control

twitter-bootstrap

bootstrap-modal