'Disable Bootstrap glyphicon

this div contains a link to open popup with bootstrap glypicon 

<div class="panel-heading" id="divHeading">
                <div class="panel-title">
                    My Header
                    <a href="#" id="lnkPopup" data-toggle="modal" data-target="#bs-example-modal-lg">
                        <span class="glyphicon glyphicon-briefcase pull-right" id="spOpenWindow"></span>
                    </a>
                </div>
            </div>

The initial page load should disable the link. 

$(document).ready(function () {       
        $("#lnkPopup").off();
    });

but its not removing the click property, any idea?

jquerytwitter-bootstrap-3


Solution 1:[1]

I have never seen off() before, but why not use disabled and then check for it on click? Like this:

<a href="#" id="lnkPopup" data-toggle="modal" data-target="#bs-example-modal-lg" disabled>
    <span class="glyphicon glyphicon-briefcase pull-right" id="spOpenWindow"></span>
</a>

Then in your javascript:

$("#lnkPopup").on("click", function(event)
{
    if ($(this).prop("disabled"))
    {
        event.preventDefault();
    }
});

By doing this, then you will be able to enable it again by simply doing:

$("#lnkPopup").prop("disabled", false);

And if you want to dynamically disable it again, then just do:

$("#lnkPopup").prop("disabled", true);

If you just change the click event, then you have to mess with the event each time instead of just the disabled property.

.

Update:

Ok so I think I understand what you mean better now. Since the javascript isn't loaded yet, you wouldn't have the click events disabled yet. Why not hide it to start with by using "display: none" like this:

<a href="#" id="lnkPopup" data-toggle="modal" data-target="#bs-example-modal-lg" style="display: none;">
    <span class="glyphicon glyphicon-briefcase pull-right" id="spOpenWindow"></span>
</a>

And then in javascript do:

$("#lnkPopup").css("display", "");

Let me know if that works for you.

Solution 2:[2]

I prefer to use CSS for that. 

#lnkPopup{
   pointer-events: none;
      cursor: default;
      color: gray;
  }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="panel-heading" id="divHeading">
  <div class="panel-title">
      My Header
       <a href="#" id="lnkPopup" data-toggle="modal" data-target="#bs-example-modal-lg">
           <!--<span class="glyphicon glyphicon-briefcase pull-right" id="spOpenWindow"></span>-->
           <span class="glyphicon glyphicon-briefcase" id="spOpenWindow"></span>
        </a>
   </div>
</div>

Solution 3:[3]

$("#lnkPopup").click(function(e){
    e.preventDefault();
    return false;
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Natalie Hedström

Related Questions