Disabled button can still open Modal dialog with data-toggle

Question

I have a button that opens a dialog. I only want it to open when the button isn't disabled (either with the css class or with the disable property on the span element. Is that possible? I think it's no possible and I can only fix it by removing the nice data-toggle="modal" feature, and do that part with my own javascript. I would prefer getting the best from both.

Button:

<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 dialog:

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

UPDATE: JavaScript Event Handling added:

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

Answer 1

you could try adding some pointer events with css

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