在禁用下拉列表的鼠标悬停时显示工具提示

Question

 countLabel() == 0 ? $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", true) : $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", false);

使用上面的代码，我可以禁用下拉列表的选择。 我还想显示一个工具提示，说明为什么下拉列表被禁用。为此，我在我的剃刀下拉列表上的@onmouseover = "showToolTip(this.id)"上写了一个函数。

function showToolTip(id)
{
    alert(id);
}

如果我在enabled的其他下拉列表上编写代码，它可以正常工作。但是当禁用下拉列表时，js功能不会触发。再加上chorome，我也无法检查元素。请帮忙。

Answer 1

在你的剃刀视图上试试这个。我对它进行了测试，它对两种情况都有效（ddl启用和禁用）：

@Html.DropDownListFor(m => m.City, new SelectList(Model.Lookups.Where(x => x.LookupType == "City"),
    "LookupID", "LookupValue"), "---- Select ----", new { disabled= true, @Title= "Tooltip here" })

请注意以下属性：

new { disabled= true, @Title= "Tooltip here" }

然后是启用和禁用选项的结果：

希望这会有所帮助......

Answer 2

通常，HTML禁用元素不会促进任何JS事件，例如悬停，点击等。为了您的目的，您将div叠加层设置为更高z-index，以便它充当禁用区域。然后，您可以在div本身上定义悬停事件。