使用工具提示禁用Bootstrap 3按钮的KnockoutJS事件绑定

Question

我需要在一个按钮上显示一个动态的Bootstrap工具提示，解释按钮被禁用的原因（即。＃34;填写您的姓名/地址/电话＆＃34;或某些变体）。我正在为项目使用Bootstrap / jQuery / KnockoutJS。

我在禁用按钮上显示Bootstrap工具提示时出现问题，并通过一些Google搜索发现这是因为未触发基础按钮事件（因为按钮被禁用，Bootstrap工具提示没有＆＃39;工作.D＆＃39;哦！）。

我使用KnockoutJS进行点击绑定来处理按钮事件。

问题：有人知道在启用按钮时禁用按钮点击事件的干净/简洁方法和包含特定的CSS类（即{{1 }） - 所以没有调用KnockoutJS点击事件，但工具提示仍然显示？

非工作代码示例：

请注意，使用btn-disabled数据绑定属性时，工具提示将不会显示。我试图通过样式/事件处理重新创建行为，但不是真的禁用控件：

HTML：

enable:false

...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>

脚本：

    <button id="testButton"
            class="btn btn-default"
            data-bind="click: clickTest, enable:false"
            data-toggle="tooltip"
            data-placement="left"
            data-original-title="Test tool tip">
        Test Button
    </button>

Answer 1

您是否忽略了文档的这一部分？：

  

Tooltips on disabled elements require wrapper elements

     

要向disabled或.disabled元素添加工具提示，请将该元素放在<div>内，然后将工具提示应用于<div>。

Answer 2

这可能不是最干净的方式，但如果您的按钮在ViewModel中表示，其状态也可以在ViewModel中表示：

var self = this;
var buttonIsDisabled = ko.observable('true');
self.clickTest = function() {
     if (self.isDisabled()) {
         $('#testButton').tooltip('show')
     }
}

或者，也许您可​​以使用button元素并最初为其提供类似showTooltip的类。每当按钮被禁用时，您可以将其类切换为类似dontShowTooltip的类，您可以查看它在self.clickTest()中的类。

这不会禁用按钮点击事件，但您可能不必。