如果在使用IE 7或8时隐藏,则单击标签不选中复选框
Clicking on label not checking checkbox if hidden when using IE 7 or 8
我正在尝试使用与复选框元素关联的标签创建一个自定义设计的复选框,并隐藏(display:none)复选框。
这在除IE之外的所有浏览器中都可以正常工作,IE要求复选框可见才能点击标签。
这是我的密码。。。
HTML
<input type="checkbox" id="myCheck" />
CSS
label.checkbox {
border:1px solid #666;
width:25px;
height:23px;
display:block;
}
jquery
$("input[type=checkbox]").each(function() {
$(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});
$("input[type=checkbox]").live('change', function() {
if ($(this).prop('checked') == true) {
$('label[for=' + $(this).attr("id") + ']').html("X")
} else {
$('label[for=' + $(this).attr("id") + ']').html("")
}
});
或者jsfiddle
我不知道是否有更有效的方法来做到这一点,但你可以通过设置页面外的复选框元素位置来做到这
.hiddenEl {
position:absolute;
top: -3000px;
}
$("input[type=checkbox]").each(function() {
$(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});
演示
更新
此外,您还可以将复选框的不透明度设置为零,这将在没有"dispayl:none"的情况下隐藏它,
$(this).css("opacity", 0)
或
$(this).fadeTo(0, 0)
试试这个:
#myCheck{
position:absolute;
left:-9999px;
}
并保留复选框"可见"
相关文章:
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 在GridView中,当单击复选框时,在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- JQuery:如何在每次单击时逐个显示段落标签数组
- 如何使Highcharts中的渲染标签始终可见,并且相对于单击或悬停的点仍然可见
- 当用户单击保存按钮时,标签会显示一条消息
- 添加ng单击到highcharts ng柱状图xAxis标签
- 调用函数单击选择标签中的选项
- JQuery:单击范围标签时切换日期选择器
- 将处理程序附加到“a”标签上的单击事件,即使我不单击也会触发
- 在jquery javascript中单击下拉列表时更改标签
- 如何通过单击更改对象标签 src
- 单击时将类添加到 ancer 标签并使用 cookie 保存
- 单击“选择标签”中的“选项”时创建,然后选中“值”创建输入
- 单击时,添加类,直到复选框/标签单击关闭
- 将TextBox.Value传递到模式窗体标签.单击时显示文本
- 使用jquery触发ul标签单击事件
- 禁用引导活动标签单击
- 模拟标签单击按钮单击
- 防止滚动复选框上的标签单击