Question

我需要在禁用的复选框上显示popover，但由于某种原因它无效。

以下是小提琴手：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'没有显示popover。

期望：

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

Answer 1

更新：

只需添加class =“disabled” - Bootstap将添加“not interactable”光标。另外，添加onclick =“return false” - 这不会让你勾选复选框。

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

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

禁用复选框上不显示bootstrap popover

1 个答案: