禁用按钮仍然可以打开模态对话框宽度数据切换

Question

我有一个打开对话框的按钮.我只希望它在没有禁用按钮时打开(使用css类或span元素上的disable属性.这可能吗？我认为这是不可能的,我只能通过删除漂亮的data-toggle="modal"功能来修复它,并使用我自己的javascript做这部分.我希望从两者中获得最佳效果.

按钮:

<span title="View Package Log" data-toggle="tooltip">
    <span id="logComputerPackageComputerAndDevice" 
          data-toggle="modal" 
          data-target="#computerPackgageLogDialog" 
          class="btn btn-primary disabled" 
          disabled>
        <i class="fa fa-file-text-o"></i> Package Log
    </span>
</span>

模态对话框:

<!-- Modal -->
<div id="computerPackgageLogDialog" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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="computerPackgageLogDialogHeader"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        @Html.TextArea("computerPackgageLogContent", "", new { @class = "form-control", rows = "20", @readonly = "readonly" })
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

更新:添加了JavaScript事件处理:

$('body').on('click', '#logComputerPackageComputerAndDevice:not(.disabled)', function () {
        // I don't enter here which is fine, but THE DIALOG STILL OPENS.
});

Answer 1

你可以尝试用css添加一些指针事件

.btn.disabled {
    pointer-events: none;
}