`

用jQuery解决IE不支持的option disable属性

阅读更多

在IE浏览器中,给select的options设置 disable属性 是没用的。

必须采用一定手段才可以解决这个问题。当然原理就是记住上次选中的 option。
this.selectedIndex 就派上用场了。
需要刷新下才可以看到效果,因为输出的都是文本,不存在js加载的情况。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 使用jQuery解决IE不支持的option disable属性 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
$(".myselect option:disabled").css('color', '#CCC'); 
$('.myselect').change(function(){ 
     if(this[this.selectedIndex].disabled){ 
        this.selectedIndex = this.s||0; 
     }else{ 
        this.s = this.selectedIndex||0; 
     } 
}) 
}) 
</script> 
</head> 
<body> 
<h1>使用jQuery解决IE不支持的option disable属性</h1> 

普通: 
<select> 
    <option>第1项</option> 
    <option disabled="disabled">第2项</option> 
    <option>第3项</option> 
    <option disabled="disabled">第4项</option> 
    <option >第5项</option> 
    <option >第6项</option> 
</select> 

对比1: 
<select class="myselect"> 
    <option>第1项</option> 
    <option disabled="disabled">第2项</option> 
    <option>第3项</option> 
    <option disabled="disabled">第4项</option> 
    <option >第5项</option> 
    <option >第6项</option> 
</select> 

对比2: 
<select class="myselect"> 
    <option>第1项</option> 
    <option disabled="disabled">第2项</option> 
    <option>第3项</option> 
    <option disabled="disabled">第4项</option> 
    <option >第5项</option> 
    <option >第6项</option> 
</select> 


<p style="margin-top:200px;font-size:12px;">Dev By CssRain,当然你有兴趣,也可以封装成插件。记得发我一份哦。</p> 
</body> 
</html> 
分享到:
评论

相关推荐

    解决developer tools在IE中不起作用的问题

    解决developer tools在IE中不起作用的问题 Developer Tools是IE浏览器中的一款强大的开发工具,它提供了许多实用的功能,例如调试、检查元素、网络请求等,但是在某些情况下,Developer Tools可能无法正常工作,...

    用jquery设置按钮的disabled属性的实现代码

    在jquery中可以使用attr()函数修改按钮的disable属性 $(“#test”).attr(‘disabled’,false); jquery 控制button的disabled属性 代码如下: $(‘#button’).attr(‘disabled’,”true”);添加disabled属性 $(‘#...

    (免费)提供 adb -disable-verity 支持

    此adb工具包中包含了adb disable-verity命令,这里免费提供给大家使用,具体可看本人的文章 ”/system/bin/sh: disable-verity: not found 的解决方案“ 【使用方式】 platform-tools解压后即可使用。在cmd中通过cd...

    adb,支持adb disable-verity命令,解锁system分区

    要使用这个命令,首先你需要一个已经重新编译的adb版本,这个版本包含了对`disable-verity`命令的支持。这通常涉及到获取adb源代码,然后按照Android的构建流程进行编译,添加或修改必要的部分来实现这个功能。在...

    交换机出现err-disable的原因及解决方法

    交换机出现err-disable的原因及解决方法 在计算机网络中,交换机是连接各个设备的核心组件。但是,有时候交换机的接口会出现err-disable状态,这会导致网络瘫痪。那么,交换机出现err-disable的原因是什么呢?如何...

    jQuery中操控hidden、disable等无值属性的方法

    一般我们在实现一些表单提交页面时会放置若干隐藏属性 比如在修改某条记录时,在编辑窗口会嵌入该记录的id 在展示界面有时需要将input或select选框设为disable以避免用户修改 下列代码中的hidden在IE中不能正常作用 ...

    使用jQuery设置disabled属性与移除disabled属性

    在Web开发中,表单元素的可交互性是控制用户输入的重要方面。...同时,jQuery也支持使用`.removeAttr()`方法来完全移除属性。在实际应用中,根据具体需求选择合适的方法,并确保代码的正确执行和功能的实现。

    Jquery ComboBox

    **jQuery ComboBox 的基本使用** 在HTML中,你需要一个`&lt;select&gt;`元素来作为ComboBox的基础。例如: ```html &lt;option value="option1"&gt;Option 1&lt;/option&gt; &lt;option value="option2"&gt;Option 2&lt;/option&gt; ... ```...

    一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

    通过进一步优化,比如添加Ajax支持以动态加载选项,或使用插件如Select2来增强下拉列表的样式和功能,你可以让这个组件变得更加实用和强大。 在实践中,可以参考名为"jQueryDemo"的压缩包文件,里面可能包含了示例...

    Jquery selectbox 支持多选

    id:”,//假设id为dr1,则可以用方法dr1.disable(),dr1.enable(),dr1.init(data,selected)/可用作联动/,dr1.text,dr1.value;$(‘#dr1′).val();dr1.onchange=callback width:100,//显示宽 listboxwidth:0,//下拉框...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    无 adb disable-verity 命令的adb应用程序

    具体可看本人的文章 ”/system/bin/sh: disable-verity: not found 的解决方案“ 【使用方式】 此文件直接放到platform-tools文件夹中替换原有的adb.exe即可生效。platform-tools路径默认在:C:\Users\你的电脑...

    jquery下拉列表插件

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理和动画效果变得更加便捷。而“jQuery下拉列表插件”就是利用jQuery来增强HTML原生的`&lt;select&gt;`元素...

    jquery.combobox

    5. **API 接口**:`jQuery.combobox` 提供了 API 方法,如 `getValue` 获取当前选中的值,`setValue` 设置指定的值,`disable` 和 `enable` 控制输入框的禁用状态等。 6. **兼容性**:由于基于 jQuery,这个插件...

    jqueryUi基础教程

    如果是事件对象,则使用 pageX 和 pageY 属性;如果是元素对象,则直接使用该元素对象。 --- #### Animate 颜色动态改变 **描述:** Animate 功能允许用户动态地改变元素的颜色,以实现过渡动画效果。 **依赖的 ...

    jquery-ui API jquery ui

    - **兼容性问题**:确保目标浏览器支持jQuery和jQuery UI所需的CSS3属性。 - **性能瓶颈**:大型应用中,可能需要考虑懒加载或按需加载jQuery UI组件,以减少初始加载时间。 总的来说,jQuery UI提供了一套完整的...

Global site tag (gtag.js) - Google Analytics