如何正确禁用与 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 日期选择器：

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>