如何正确禁用与input-group-addon一起使用的跨度

Question

我正在使用Bootstrap，并且在input-group-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>

我将Bootstrap datepicker定义为：

var datePicker = $(".input-group.date").datepicker({myOptions});

有时我会像这样禁用日期选择器：

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

但是我不能禁用dp1Icon。我已经研究了很多。首先，引导日期选择器中没有“显示”的方法可以让我捕获并防止默认设置。

其次，“ pointer-events：none”在IE上不起作用。

第三，使用此方法也不起作用：

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

也不会工作。

我可以轻松地删除点击处理程序，如下所示：

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

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

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

我剩下什么解决方案？感谢您提供任何有用的提示。

Answer 1

概念证明：

$("#dp1Icon_blocked").off(); //remove all event 
function disable()
{
$("#dp1").prop("disabled", true);
$("#dp1Icon").addClass("hidden");
$("#dp1Icon_blocked").removeClass("hidden")

}

function enable()
{
$("#dp1").prop("disabled", false);
$("#dp1Icon").removeClass("hidden");
$("#dp1Icon_blocked").addClass("hidden")

}

//display purposes not part of the solution:
$($("button")[0]).click(disable);
$($("button")[1]).click(enable);

.hidden{
 display: block;
}

.blocked {
   color: #c2c2c2 !important; /* The important overrides the settings from bootstrap */
   cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="input-group date">

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

    <span class="input-group-addon" id="dp1Icon">Date</span>
    <span class="input-group-addon blocked hidden" id="dp1Icon_blocked">Date</span>
</div>

<button>Disable</button><button>Enable</button>