ASP.NET Core中如何根据条件禁用编辑图标？

问题根源 #

原生HTML里，<a>链接标签和<i>图标标签不支持disabled属性——这个属性仅对表单控件（如<button>、<input>）生效，所以你之前给这两个标签加disabled="@ViewBag.status"不会产生任何禁用效果。

解决方案 #

下面提供两种实用的实现方式：

方式一：用样式+可选JS控制点击行为

先根据条件给元素添加禁用类，再通过CSS阻止点击、修改视觉状态：

<a asp-action="Edit" asp-route-id="@item.Id" class="@(ViewBag.status ? "disabled-link" : "")">
  <i class="fas fa-edit @(ViewBag.status ? "disabled-icon" : "")" style="color:darkolivegreen" title="@(ViewBag.status ? "无法编辑" : "Edit Bundle")"></i>
</a>

添加CSS样式：

/* 阻止链接点击，修改光标样式 */
.disabled-link {
  pointer-events: none;
  cursor: not-allowed;
}
/* 图标变灰，明确禁用状态 */
.disabled-icon {
  opacity: 0.5;
}

如果需要兼容不支持pointer-events的老旧浏览器，再补充一段JS：

document.querySelectorAll('.disabled-link').forEach(link => {
  link.addEventListener('click', e => e.preventDefault());
});

方式二：根据条件渲染不同内容

直接通过后端判断条件，决定渲染可点击的链接还是纯禁用图标：

@if (ViewBag.status) {
  <!-- 禁用状态：只显示不可点击的图标 -->
  <i class="fas fa-edit" style="color:darkolivegreen; opacity:0.5; cursor:not-allowed" title="无法编辑"></i>
} else {
  <!-- 正常状态：渲染可点击的编辑链接 -->
  <a asp-action="Edit" asp-route-id="@item.Id">
    <i class="fas fa-edit" style="color:darkolivegreen" title="Edit Bundle"></i>
  </a>
}

这种方式更直接，不需要额外的CSS/JS，适合后端能直接控制渲染逻辑的场景。

内容的提问来源于stack exchange，提问作者A Cameron