i use twitter bootstrap and jquery.
Depending of a variable, i would like to disable and remove the possibility to click
<ul class="nav nav-pills nav-stacked">
<li id="member" role="presentation" data-toggle="tab" class="active"><a href="#"><span class="glyphicon glyphicon-inbox"></span> Membres</a></li>
<li id="subscription" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-bed"></span> Abonnements</a></li>
</ul>
i tried this code
if (role != "ROLE_ADMIN") {
$('#subscription').addClass("disabled").find("a").attr("onclick", "return false;");
$('#report').addClass("disabled").find("a").attr("onclick", "return false;");
$('#user').addClass("disabled").find("a").attr("onclick", "return false;");
$('#setup').addClass("disabled").find("a").attr("onclick", "return false;");
} else {
$("#subscription").removeClass("disabled").find("a").removeAttr("onclick");
$("#report").removeClass("disabled").find("a").removeAttr("onclick");
$("#user").removeClass("disabled").find("a").removeAttr("onclick");
$("#setup").removeClass("disabled").find("a").removeAttr("onclick");
}
li is disabled, but i can click on it…
Edit
$('#user').prop('onclick',null).off('click');
seem to do the job
4
Answers
just because it appears disabled does not necessarily mean it is disabled. you will have to listen to events and prevent their default action to disable them.
or, using CSS you can use
pointer-events: none;
Your code can be simplified a lot. If you want to remove the ‘clickable’ styles of your links, try this:
js
css
Here is a working fiddle
Add some styles to your disabled class like
Add
disabled
class to your element and then add this JS script to prevent clicking on disabled elements :