Javascript 如何正确禁用与输入组插件一起使用的范围

我使用的是Bootstrap，我与输入组addon类有一个跨度。我们都知道，将附加组件与其他组件一起使用是相当常见的。我遇到的问题是，在我禁用与其关联的输入之后，禁用具有此类的范围

在我的示例中，我使用了一个带有引导日期选择器组件的日历插件

<div class="input-group date">

    <input type="text" class="form-control" id="dp1" />

    <span class="input-group-addon" id="dp1Icon"><img src="<%=context%>/images/calendar-glyph.png"></span>

</div>

有时我禁用日期选择器，如下所示：

$("#dp1").prop("disabled", true);

$("#dp1Icon").off("click");

但我不能禁用dp1Icon。我做了不少研究。首先，在引导数据采集器中没有“显示”方法允许我捕获和防止默认值

其次，“指针事件：无”在IE上不起作用

第三，使用这种方法也行不通：

$("#dp1Icon").click(function(e){// if it has a certain class, e.preventDefault()});

也不行

我可以像这样轻松地删除单击处理程序：

$("#dp1").prop("disabled", true);

$("#dp1Icon").off("click");

但是我如何重新分配它来再次打开日期选择器呢？这不起作用：

$("#dp1Icon").on("click",$(".input-group.date").datepicker("show");

我还有什么解决办法？谢谢你的建议

概念验证：

$（“#dp1Icon_已阻止”）.off（）//删除所有事件
函数禁用（）
{
$（“#dp1”）.prop（“禁用”，真）；
$（“#dp1Icon”）.addClass（“隐藏”）；
$（“#dp1Icon_已阻止”）.removeClass（“隐藏”）
}
函数启用（）
{
$（“dp1”）.prop（“禁用”，false）；
$（“#dp1Icon”）.removeClass（“隐藏”）；
$（“#dp1Icon_已阻止”）.addClass（“隐藏”）
}
//显示目的不是解决方案的一部分：
$（$（“按钮”）[0]）。单击（禁用）；
$（$（“按钮”）[1]）。单击（启用）
。隐藏{
显示：块；
}
.封锁{
颜色：#c2c2！重要；/*重要覆盖引导设置*/
光标：不允许；
}

日期
日期
禁用启用
使用css临时隐藏跨度，并替换为具有灰显图标的相同元素？不工作。我不太清楚你在这里干什么。添加隐藏类并不是隐藏dp1Icon。“不允许的光标”不会阻止他们单击日期选择器时显示该日期选择器。试图隐藏原始元素
#dp1Icon
，并将其替换为相同的元素。我想它可能会起作用。是的，这完全有道理，但你仍然没有阻止点击DP1IConu。您所做的只是将游标设置为“不允许…”，但这不起作用。@fumeng使用jQuery的
off（）
对替换的元素（保留原始元素）进行编辑。这可能会起作用..off（）确实可以删除单击事件。但是我如何重新分配它呢？我更新了我原来的帖子，向你展示我的尝试。但它不起作用。