Twitter Bootstrap Question posted in

disable li and don't allow to click – Twitter bootstrap

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

Tags:

4

Answers


  1. 0

    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;

    Login or Signup to reply.
  2. 0

    Your code can be simplified a lot. If you want to remove the ‘clickable’ styles of your links, try this:

    js

    if (role != "ROLE_ADMIN") {
  $('#subscription, #report, #user, #setup')
      .addClass("disabled")
      .find("a").prop("disabled", true);
} else {
   $('#subscription, #report, #user, #setup')
      .removeClass("disabled")
      .find("a").prop("disabled", false); 
}

    css

    .disabled a {
  pointer-events: none;
  color: grey;
}

    Here is a working fiddle

    Login or Signup to reply.
  3. 0

    Add some styles to your disabled class like

    .disabled{
    pointer-events:none;
    opacity:0.7;
}
    Login or Signup to reply.
  4. 0

    Add disabled class to your element and then add this JS script to prevent clicking on disabled elements :

        $('a').click(function () {
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search