javascript - bootstrap popover 未显示在禁用的复选框上

Question

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

这是 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>

JS

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(禁用的第二个复选框)应该显示类似于第一个复选框的弹出消息。

Answer 1

更新:

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

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

更新 fiddle :https://jsfiddle.net/99x50s2s/132/