使用jquery单击停止ActionLink

时间:2014-02-21 10:31:29

标签: jquery asp.net-mvc

我在SO和旧的Google搜索上看到了一些解决方案。然而,他们中的很多人似乎都在处理它被点击后被禁用的事实,或者如果它确实禁用了它,它保留了点击它的能力(实际上它只是变灰)。

我目前得到了以下代码,正如我所说,它会使ActionLink变灰,但仍然可以点击它。

$(function DisableEnableLink() {
    var addDiv = document.getElementById('addNewItemDiv');
    // items is determined by logic which checks different values on the page, I have removed this logic as it works fine and isn't necessarily connected to the rest of the query.  
    //It returns 0 if the logic finds no items, or 'X' if it does.  This will then determine whether the Action link is enabled or disabled.
    if ($('items').length > 0) {
        addDiv.disabled = true;
    } else {
        addDiv.disabled = false;
    }
});

我的ActionLink实际上包含在div内,因为我可以提供该ID。

<div id="addNewItemDiv">
    @Html.ActionLink("Add New Item", "Add");
</div>

如何修改我必须拥有的内容只显示文字?我无法在视图中使用if statement,因为我使用jquery填充数据,因此页面不会回发。

2 个答案:

答案 0 :(得分:0)

你可以这样做:

 @Html.ActionLink("Add New Item", "Add",new {id="Add"});

在您的Jquery代码中,

  if(check your condidtion here)
{
   $('Add').prop('disabled', true);
}

else
{
  $('Add').prop('disabled', false);

}

将ID设置为Helper并使用jquery的 PROP 方法启用/逐步删除链接

希望这会有所帮助..

注意: Diable链接不是整个div ..如果您需要这样做,只需用div的ID替换链接ID

<强> Updated2:

尝试使用CSS执行此操作

像这样添加一个CSS类:

.disableClick{
    pointer-events: none;
}

 @Html.ActionLink("Add New Item", "Add",new {id="Add",@class="disablelink"});

  if(your condidtion)
{
   $('#Add').addClass('disbaleClick');
}
else
{
   $(#Add).removeClass('disableClick');
}

答案 1 :(得分:0)

您可以将css属性设置为:

pointer-events:none;

然后再次启用它,你可以设置  pointer-events:auto

 $(function DisableEnableLink() {
    var addDiv = document.getElementById('addNewItemDiv');
    if ($('items').length > 0) {
        addDiv.disabled = true;
        $('addDiv').css('pointer-events','none')
    } else {
        addDiv.disabled = false;
        $('addDiv').css('pointer-events','auto')
    }
});