Question

我使用twitter bootstrap和jquery。

根据变量，我想禁用并删除单击

的可能性

<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>

我试过这段代码

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已停用，但我可以点击它...

修改

$('#user').prop('onclick',null).off('click');

似乎做了这份工作

Answer 1

将某些样式添加到已禁用的类，例如

.disabled{
    pointer-events:none;
    opacity:0.7;
}

Answer 2

只是因为它显示为禁用并不一定意味着它被禁用。您必须收听事件并阻止其默认操作才能禁用它们。

或使用CSS，您可以使用pointer-events: none;

Answer 3

您的代码可以简化很多。如果你想删除“可点击的”＆＃39;你的链接样式，试试这个：

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;
}

这是一个有效的fiddle

Answer 4

向您的元素添加disabled类，然后添加此JS脚本以防止单击禁用的元素：

    $('a').click(function () {
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });

禁用li并且不允许单击

4 个答案:

JS

CSS