IE下单选按钮隐藏后点击对应label无法选中的bug解决
来源:互联网 发布:mia wasikowska 知乎 编辑:程序博客网 时间:2024/05/25 08:11
项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。
注意,需要指定表单元素的id属性然后使用label的for属性绑定控件。
<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);
}
需要提醒的是,label的for属性是内联元素,其对应的js属性为htmlFor,例如可以这样访问或设置for属性值。document.getElementById("xxx").htmlFor="inputid";;
目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
- IE下单选按钮隐藏后点击对应label无法选中的bug解决
- 解决在IE下label中点击img图片无法选中radio的方案
- 解决在IE下label中IMG图片无法选中radio的几个方法
- 点击超链接,选中对应的单选按钮
- iOS开发之解决隐藏tabbar后原位置无法响应点击事件的问题
- iOS巅峰之解决隐藏tabbar后原位置无法响应点击事件的问题
- 解决监听label时,点击label内input执行两次的bug
- 在IE下label标签图片下隐藏的单选按钮radio不起作用解决办法
- 点击按钮后出现新的输入画面,否则隐藏
- 如何实现点击按钮后,隐藏datagrid的某一列
- 单选按钮点击无法选中
- 解决IE6下select无法设置选中的BUG
- 解决在IE下创建checkbox无法选中的问题
- 如何解决点击"LinkLabel"后,"LinkLabel"像Label一样不可编辑,也不能选中,且宽度正好与其文本宽度相等(像Google的分页页码一样)
- topdesk 图标隐藏 后无法显示的BUG
- Android中点击按钮后隐藏输入法
- 按钮超出父控件后无法响应点击的解决方法
- 点击单选按钮后的文字即可选定对应单选按钮
- C语言中typedef的用法
- 11210 - Chinese Mahjong
- MySQL explain 方法的使用
- 用myeclipse如何将java程序生成一个.exe可运行文件?
- 硝烟中的Scrum和XP-我们如何实施Scrum 14)测试 15)多团队 Part 1/2
- IE下单选按钮隐藏后点击对应label无法选中的bug解决
- 巧计23种设计模式
- android xstream
- POJ 2823 Sliding Window
- 情路上最痛苦
- 使用easy_install时报错如下: error: Setup script exited with error: command ‘gcc’ failed with exit status 1
- SNMP协议通俗理解
- 你必须知道的.NET(第2版)(奋斗的小鸟)_PDF 电子书
- eclipse里报:An internal error occurred during: "Building workspace". Java heap space)