引导弹出框未显示在禁用复选框上答案

【问题标题】：bootstrap popover not displayed on disabled checkbox引导弹出框未显示在禁用复选框上
【发布时间】：2016-01-06 17:33:23
【问题描述】：

我需要在禁用的复选框上显示弹出框，但由于某种原因它不起作用。

这里是 fiddler：https://jsfiddle.net/99x50s2s/124/

HTML

 <div class="checkbox">
    <label>
      <input type="checkbox" id="AccessChkBox"> Click here [this one displays popover]
    </label>
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="AccessChkBox2"> Click here [this one does not display popover]
    </label>
  </div>

function GetAdminNames()
{
    return '<li>Some user name</li>';
}

var accessChkBox = $('#AccessChkBox');
var accessChkBox2 = $('#AccessChkBox2');

var messageToDisplay = "You don't have necessary authorization. Please contact anyone of the following admin to get the authorization.";

messageToDisplay += '<ul>';
messageToDisplay += GetAdminNames();
messageToDisplay += '</ul>';

//now set the popover

accessChkBox.
data('toggle', 'popover').
data('trigger', 'hover').
data('placement', 'right').
data('html', 'true').
prop('title', 'Authorization Status').
data('content', messageToDisplay).popover();  


//this one does not display popover
accessChkBox2.prop('disabled', true);

accessChkBox2.
data('toggle', 'popover').
data('trigger', 'hover').
data('placement', 'right').
data('html', 'true').
prop('title', 'Authorization Status').
data('content', messageToDisplay).popover();

在上面的代码中，“accessChkBox2”没有显示弹出框。

预期：

accessChkBox2（第二个被禁用的复选框）应该显示类似于第一个复选框的弹出消息。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

更新：

只需添加 class="disabled" - Bootstap 将添加“不可交互”光标。另外，添加 onclick="return false" - 这不会让您选中复选框。

<input type="checkbox" id="AccessChkBox2" class="disabled" onclick="return false">

更新小提琴：https://jsfiddle.net/99x50s2s/132/

【讨论】：

当然，我认为这个解决方案会奏效。但是，我想将复选框显示为禁用（使用 css 显示为禁用？），以便用户不会继续点击它...
更新了小提琴链接。这应该可以完成工作。
另外，使用更新的小提琴，您不需要 onclick="return false"。
不确定我是否遗漏了任何东西。我没有看到复选框随着更新的提琴手变灰...而且，第二个复选框仍然可以点击。
似乎“禁用”类对复选框没有/更少的影响。但是，我喜欢这个解决方案，我会接受它。