jeudi 8 octobre 2015

bootstrap popover not displayed on disabled checkbox

I need to display popover on a disabled checkbox but, for some reason it is not working.

Here is the fiddler: http://ift.tt/1LpxsnQ

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();

In the above code, the 'accessChkBox2' is not displaying popover.

Expectation:

accessChkBox2 (this second checkbox which is disabled) should display popover message similar to the first checkbox.




Aucun commentaire:

Enregistrer un commentaire