IE下单选按钮隐藏后点击对应label无法选中的bug解决
2013-10-10 11:26
387 查看
项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。
代码示例:
<input type="radio" name="gender" id="gender1" value="男" checked="checked" />
<label for="gender1">男</label>
<input type="radio" name="gender" id="gender2" value="女" />
<label for="gender2">女</label>
通过CSS设置display:none 或者 visibility: hidden隐藏掉radio按钮,则当点击label切换选择状态时,对应的按钮实际上是未被改变状态。解决方法有几种:
1.通过javascript脚本来再次操作DOM保证选择状态
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
2.不使用display:none,通过position属性定位到可视区域外,避开问题。
position: absolute;
top: -999px;
left: -999px;
3.通过z-index/width或透明度opacity将元素隐藏掉。
input{
position: absolute;
z-index: -1;
}
或者是
input{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);
}
目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
代码示例:
<input type="radio" name="gender" id="gender1" value="男" checked="checked" />
<label for="gender1">男</label>
<input type="radio" name="gender" id="gender2" value="女" />
<label for="gender2">女</label>
通过CSS设置display:none 或者 visibility: hidden隐藏掉radio按钮,则当点击label切换选择状态时,对应的按钮实际上是未被改变状态。解决方法有几种:
1.通过javascript脚本来再次操作DOM保证选择状态
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
2.不使用display:none,通过position属性定位到可视区域外,避开问题。
position: absolute;
top: -999px;
left: -999px;
3.通过z-index/width或透明度opacity将元素隐藏掉。
input{
position: absolute;
z-index: -1;
}
或者是
input{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);
}
目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
相关文章推荐
- IE下单选按钮隐藏后点击对应label无法选中的bug解决
- 解决在IE下label中点击img图片无法选中radio的方案
- 在IE下label标签图片下隐藏的单选按钮radio不起作用解决办法
- 解决在IE下LABEL中IMG图片无法选中RADIO的几个方法
- SWFupload在IE9中选择文件按钮无法点击bug解决方法
- 解决在IE下label中IMG图片无法选中radio的几个方法
- 点击超链接,选中对应的单选按钮
- 单选按钮点击无法选中
- 解决在IE下label中IMG图片无法选中radio的几个方法
- IE下 checkbox、radio等标签的label中的img点击无效(点击不能选中)问题解决
- IE label中有图片 无法选中radio?其实可以完美解决
- 解决在IE下label中IMG图片无法选中radio的几个方法
- 点击单选按钮radio后面的文字即可选中单选按钮
- 两个单选按钮(一个是,一个否 ),一个div层,实现点击隐藏,显示div
- jquery.uploadify.3.2 试用(同时解决IE9 IE10 按钮无法点击的问题)
- a标签position为absolute时,IE无法点击(a position:absolute bug ie)
- as3中点击按钮或者输入文本框后舞台无法接收键盘输入的解决方法
- 原创IE无法打开javascript链接(点击无反应)的解决办法
- iOS自定义tableViewCell中的按钮无法点击的解决方法
- 解决点击关闭按钮,应用程序退出时,系统爆出“集合已修改,可能无法执行枚举操作”异常的相关思路