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

Answer 2

禁用的属性wount适用于span元素。如果存在，它指定应禁用input或button元素。

W3Schools.com

所以尝试输入元素。 Bootsrapt使用按钮进行模态。

Example

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

2 个答案: