twitter-bootstrap 如何正确禁用与 input-group-addon 一起使用的跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28971675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly disable spans used with input-group-addon
提问by fumeng
I'm using Bootstrap and I have a span with the input-group-addon class. As we're all aware, using add-ons with other components is fairly common. The problem I have is disabling the span that has this class after I've disabled the input its tied to.
我正在使用 Bootstrap 并且我有一个带有 input-group-addon 类的跨度。众所周知，将附加组件与其他组件一起使用是相当普遍的。我遇到的问题是在禁用与其绑定的输入后禁用具有此类的跨度。
In my example, I use a calendar addon with a bootstrap datepicker component.
在我的示例中，我使用带有引导日期选择器组件的日历插件。
<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>
I define my Bootstrap datepicker as such:
我这样定义我的 Bootstrap 日期选择器：
var datePicker = $(".input-group.date").datepicker({myOptions});
Sometimes I disable my datepicker like this:
有时我会像这样禁用我的日期选择器：
$("#dp1").prop("disabled", true);
But I can't disable the dp1Icon. I've researched quite a bit. First, there is no method "showing" in the bootstrap datepicker that'll allow me to trap and prevent default.
但我无法禁用 dp1Icon。我已经研究了很多。首先，引导程序日期选择器中没有“显示”方法可以让我捕获和防止默认值。
Second, "pointer-events:none" doesn't work on IE.
其次，“pointer-events:none”在 IE 上不起作用。
Third, using this won't work either:
第三，使用它也不起作用：
$("#dp1Icon").click(function(e){// if it has a certain class, e.preventDefault()});
wont' work either.
也行不通。
I can easily remove the click handler like this:
我可以像这样轻松删除点击处理程序：
$("#dp1Icon").off("click");
But then how do I re-assign it to open up the datepicker again? This doesn't work:
但是，我如何重新分配它以再次打开日期选择器？这不起作用：
$("#dp1Icon").on("click",$(".input-group.date").datepicker("show");
What solutions am I left with? Thanks for any helpful tips.
我还剩下什么解决方案？感谢您提供任何有用的提示。
回答by Mouser
Proof of concept:
概念证明：
$("#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>