IE下单选按钮隐藏后点击对应label无法选中的bug解决

项目中,有时候填写表单我们的选项会隐藏掉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以后会不会和标准浏览器的行为看齐。希望吧!!

时间: 2024-10-15 06:43:06

IE下单选按钮隐藏后点击对应label无法选中的bug解决的相关文章

Android安装应用后点击&quot;打开&quot;(Open)带来的问题及解决方式

MainActivity如下: package cc.cc; import android.app.Activity; import android.content.Intent; import android.os.Bundle; /** * Demo描述: * * 一年多前遇到一个问题--->: * 1 客户从GooglePlay上下载了我参与的开发的应用 * 2 下载完成后,点击安装 * 3 安装完成后,在屏幕底部有两个选项"打开"和"完成" * 4 点

ubuntu下安装Firefox后点击firefox没有为可执行文件文件类型安装应用程序

http://blog.csdn.net/pipisorry/article/details/39480227 ubuntu上安装 firefox 和 Chrome 与 Opera 不同,Mozilla 的官方网站提供的 Firefox for Linux 并不是 deb 或 rpm 这样的安装包,而是一个 tar.bz2 的压缩文档.许多人看到 tar.bz2或 tar.gz 这样结尾的文件,自然而然地会以为这又是什么"源代码编译安装"?太痛苦了!其实不是,把它下载下来,解压缩,你会

使用virtualbox 虚拟机在windows下安装Ubuntu后的文件夹挂载 共享文件夹挂载出错 解决

virtualbox 中主机为win8虚拟机为Ubuntu14.04 文件夹挂载问题: 自动挂载:使用虚拟机提供的共享文件夹,建立固定分配的数据空间,勾选自动挂载,但是每次开机后挂在到的是/media/sf_MyShare文件夹,并且该文件夹只有root采用执行权限,所以不想要挂载到此文件夹下 挂载到/mnt/shared下的方式: 对于大多数资料上所说在/etc/fstab中追加"share /mnt/share vboxsf defaults 0 0"或者是"share

svn下copy项目后定位到新资源库,产生不同版本号的方法&lt;转&gt;

我和项目组的一个同事考虑是要svn创建一个新的分支,然后基于分支进行开发,但后来考虑到英文版本的项目是非分支,而是一个新项目,是不需要最终合并到master上 面的,so...我们现在需要在svn下copy项目后定位到新资源库,从而commit产生不同版本号. 下面介绍下svn下copy项目后定位到新资源库,产生不同版本号的方法: 步骤: 1.先在svn远程资源库中检出中文版本的完整项目A到eclipse的workspace中,检出的项目名称叫B(此时B项目中会存在A项目中的svn版本信息) 2

按下enter键后表单自动提交问题

在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Ajax请求返回结果:而按下enter键是直接post请求然后跳转返回一个页面,失去了页面样式及导航等. 一开以为是写了js代码导致按下enter键之后会触发表单提交,后来把js代码全部移除也是一样地按下enter键会触发表单提交.到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自

解决Ext4.2.3中propertyGrid修改后点击排序报错

Ext4.2.3中PropertyGrid修改后点击排序报错,具体错误信息如下: 一开始还怀疑是自己哪里配置错了,各种尝试结果还是一样.查遍百度和谷歌,无果,只有一篇帖子说是4.2.4修正了.还是自己动手吧,自己动手丰衣足食. 点开报错地方(如下图所示),原来是me.field.column没有定义. 然后继续找,找啊找啊找到Ext.grid.property.Grid的getCellEditor方法.此方法有参数column,可在方法体内,column就没有被用到过,于是就感觉问题出在这里.

windows7 64bit下mvn命令后提示‘cmd’不是内部或外部命令,也不是可执行程序或批处理文件

首先,开命令提示符,输入如下命令试试echo %M2_HOME% 回车如果显示的路径和安装路径一致说明配置没问题; 那么出现这个问题的原因可能就是路径问题,可能是你安装了某个软件更改了系统映射路径导致的. 相应的解决办法是:往PATH中添加%SystemRoot%\system32即可.注意:%SystemRoot%\system32前需要加分号. 下图是我修改后的path环境变量 重新运行控制台,结果如下图所示: 注意:要重新启动cmd.exe. 希望能够帮助到需要的人. windows7 6

jsp按钮隐藏自动点击

<%@ page language="java" import="java.util.*" pageEncoding="big5"%><html> <head><script type="text/javascript">function but(){ $("#bu").click();}setTimeout(but,1000);</script>

xcode4.3 完成输入后 点击背景关闭键盘

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [self.view endEditing:YES];}把这个复制到视图对应的.m文件中,即可 xcode4.3 完成输入后 点击背景关闭键盘,布布扣,bubuko.com