Question

使用Bootstrap

  <ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu">
                <li role="presentation" id="LiNewsFeed"><a href="javascript:GetNewsFeed();">News Feed</a></li>
                <li role="presentation" id="LiStatusUpdate"><a href="javascript:StatusUpdate();">Update Status</a></li>
                <li role="presentation" id="LiWriteWall"><a href="javascript:WriteOnWall();">Post On Wall</a></li> 
                <li role="presentation" id="LiNotifications"><a href="javascript:GetNotifications();">Notifications</a></li>
                <li role="presentation" id="LiLogOut"><a href="javascript:LogOut();">Logout</a></li> 
  </ul>

在Javascript中，我正在禁用某些<li>，如下所示：

 $('#LiNewsFeed').addClass('disabled');

列表中的项目实际上已禁用，当我点击它时，它实际上调用了javascript函数，因此，我需要的是禁用<a href>而不仅仅是<li>

我尝试在$(document).ready之后添加此内容：

$(".nav li.disabled a").click(function () {
                return false;
});

但它并没有真正做任何事情。

我需要的是在我的Js代码中禁用<a href>后直接禁用<li>，而不是依赖点击事件......

好像没有办法禁用<a href>，所以我需要解决这个问题

任何帮助都将不胜感激。

Answer 1

如果父母有禁用的课程，我会检查每个链接。

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

编辑，根据OP提供的更多信息，我建议如下：

$('.nav li a').each(function() {
    var $this = $(this);

    // store reference of 'href' attr in case link is re-enabled
    $this.data('href', $this.attr('href'));

    if ($this.parent('li').hasClass('disabled')) {
        // remove href attribute disabling click
        $this.removeAttr('href');
    } else {
        // restore href
        $this.attr('href', this.data('href'));
    }
});

在li元素上添加/删除禁用的类后，应该运行此代码。

编辑2 - 您可以执行以下操作，而不是从<a>链接的href调用函数：

var events = {
    '#LiNewsFeed': 'GetNewsFeed',
    '#LiStatusUpdate': 'StatusUpdate'
    '#LiWriteWall': 'WriteOnWall',
    '#LiNotifications': 'GetNotifications',
    '#LiLogOut': 'LogOut'
};

for (var selector in events) {
    if (events.hasOwnProperty(selector)) {
        try {
            $(selector).click(function () {
                // assuming function is global
                if (typeof window[events[selector]] === 'function') {
                    // call function
                    window[events[selector]]();
                }
                // this is needed if the a element still has a href attr
                return false;
            });
        } catch (e) {
            console.log('Invalid Selector');
        }
    }
}

这样你可以控制函数的调用，并检查是否应该在不改变元素的情况下调用它，也许坚持

if (!$(this).parent('li').hasClass('disabled')) {
    ...
}

围绕函数调用。

Answer 2

使用下面的代码。检查工作示例JSFIDDLE

$(".nav li.disabled a").each(function(){
     $(this).attr('href','javascript:void(0);');
});

Answer 3

当您在javascript（运行时）中禁用LI时，应使用.on绑定已禁用链接上的事件：

$(".nav").on('click', 'li.disabled a', function () {
    return false;
});

Answer 4

你可以将a转换为span吗？

（代码未经测试）

$(".nav li.disabled a").replaceWith(function() { return "<span>" + this.innerHTML + "</span>"; });

禁用<a href=""> in runtime using Javascript</a>

4 个答案: