`

jQuery禁止并灰显下拉选项

阅读更多

        jQuery禁止并灰显下拉选项,是通过给option加disabled="true"属性控制的,如下示例所示:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(document).ready(function(){  
		$(".field").change(function(){    
			$(this).css("background-color","#FFFFCC");  
		});
	});
</script>
</head>
<body>
	<p>在某个域被使用或改变时,它会改变颜色。</p>
	Enter your name:
	<input class="field" type="text" />
	<p>
		Car:<select class="field" name="cars" id="cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="fiat" disabled="true">Fiat</option>
			<option value="audi" disabled="true">Audi</option>
		</select>
	</p>
</body>
</html>

        运行效果:

        如要通过JS控制某个option禁止并灰显,最简单的方法是给option加id,然后通过$("#fiat").attr("disabled","disabled");或$("#fiat").attr("disabled",true);实现,如下示例所示:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(document).ready(function(){  
		$(".field").change(function(){    
			$(this).css("background-color","#FFFFCC");  
		});
		
		$("#fiat").attr("disabled","disabled");
		$("#audi").attr("disabled",true);
	});
</script>
</head>
<body>
	<p>在某个域被使用或改变时,它会改变颜色。</p>
	Enter your name:
	<input class="field" type="text" />
	<p>
		Car:<select class="field" name="cars" id="cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="fiat" disabled="true">Fiat</option>
			<option value="audi" disabled="true">Audi</option>
		</select>
	</p>
	
	<p>
		Car2:<select class="field" name="cars2" id="cars2">
			<option value="volvo" id="volvo">Volvo</option>
			<option value="saab" id="saab">Saab</option>
			<option value="fiat" id="fiat">Fiat</option>
			<option value="audi" id="audi">Audi</option>
		</select>
	</p>
</body>
</html>

        运行效果:

        当然,如果不给option加id,也可以通如下方法来获取option,并进行控制。

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(document).ready(function(){  
		$(".field").change(function(){    
			$(this).css("background-color","#FFFFCC");  
		});
		
		var options = $("#cars3").find("option");
		var count = options.length;
		for(var i=0; i<count; i++) {
			if($(options[i]).text() !== "请选择") {
				$(options[i]).attr("disabled", true);
			}
			//如下写法也OK
			/*
			if(options[i].text !== '请选择') {
				options[i].disabled = true;
			}
			*/
		}
		
		/*如下写法也OK,另一种控制方法
		var count2=$("#cars3 option").length;
		for(var i=0;i<count2;i++) { 
			if($("#cars3").get(0).options[i].text !== "请选择") {
				$("#cars3").get(0).options[i].disabled = true;
			}
		}
		*/
	});
</script>
</head>
<body>
	<p>在某个域被使用或改变时,它会改变颜色。</p>
	Enter your name:
	<input class="field" type="text" />
	<p>
		Car3:<select class="field" name="cars3" id="cars3">
			<option>请选择</option>
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="fiat">Fiat</option>
			<option value="audi">Audi</option>
		</select>
	</p>
</body>
</html>

        运行效果:

  • 大小: 13.5 KB
  • 大小: 17.3 KB
  • 大小: 17.6 KB
分享到:
评论

相关推荐

    jquery iscroll下拉插件

    6. **可选:上拉加载更多**:除了下拉刷新,jQuery iScroll还支持上拉加载更多的功能,只需设置`pullUpLoad`选项为`true`,并在`onPullUp`回调中处理加载更多数据的逻辑。 理解jQuery iScroll下拉插件的工作原理,...

    jquery-combobox完美版,修复默认选择,滚动后无法关闭等问题

    本文将详细解析这些问题,并分享一个经过优化的“jquery-combobox完美版”,确保其功能完善,用户体验优秀。 首先,我们来理解jQuery Combobox的基本结构。它由一个文本输入框和一个下拉列表组成,用户可以通过输入...

    jquery移动端日期选择插件

    在移动应用或网页中,传统的下拉式日期选择器在小屏幕上可能不那么友好。而jQuery移动端日期选择插件则提供了更直观、用户友好的界面,如滑动日历视图,使用户能够轻松地点击选择日期。 三、jQuery日期选择插件的...

    Layui 动态禁止select下拉的例子

    在本文中,我们将深入探讨如何在Layui框架中实现动态禁止`select`下拉的功能。Layui是一个流行的前端轻量级UI框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建美观且功能强大的网页应用。在某些场景下,...

    多年收集的 JavaScript、jQuery 插件、UI 集合,值得温故知新的前端学习旅程

    2. **横向下拉菜单-4.html**:这个例子展示了如何使用jQuery创建响应式的横向下拉菜单,涉及到CSS样式控制、鼠标悬停事件处理、以及动态显示和隐藏子菜单的逻辑。 3. **更换网页背景的jquery代码(写入cookie)....

    日期插件 jquery-date.js

    1. **日期选择**:用户可以通过下拉菜单选择年、月、日,或者直接输入日期,插件会自动验证格式。 2. **时间选择**:除了日期,还可以选择时间,支持小时、分钟和秒的输入。 3. **事件监听**:插件提供了一系列的...

    240多个jQuery UI插件

    - **jQuery Disable Text Select Plugin**: 禁止文本被选中。 - **Edit in Place with Ajax using jQuery**: 结合Ajax实现就地编辑。 - **jQuery Plugin - Another In-Place Editor**: 另一种就地编辑插件。 - *...

    jQuery日期插件

    它提供了丰富的配置选项和主题支持,可以自定义日期格式、显示月份和年份的下拉菜单、禁用特定日期等。Datepicker还支持多语言,可以轻松适应不同地区的用户需求。 **使用步骤** 1. **引入依赖**:在项目中,首先...

    【CSDN原版_禁止再上传】PPT menu website

    【CSDN原版_禁止再上传】PPT menu website是一个关于网页下拉菜单设计的资源,主要用于在公司展示或演示。此资源强调了设计的优美性和原创性,旨在为用户提供一种创新的方式来呈现网站导航菜单。作者对于无积分上传...

    jQuery Easyui 下拉树组件combotree

    例如,`onSelect`事件会在用户选择节点时触发,通过这个事件可以实现一些额外的逻辑处理,如上面代码中注释掉的逻辑,就是禁止选择非叶子节点,并在选择非叶子节点时清空之前的选择。事件处理函数可以接收一个参数,...

    带搜索的下拉框,并且支持多选

    带搜索的下拉框是一种交互式的UI组件,它结合了传统的下拉菜单和搜索功能。当用户需要从一个长列表中选择一项或多项时,这个组件尤其有用。用户可以输入关键词来过滤选项,而不是逐个滚动浏览整个列表。这种设计减少...

    jquery UI 1.72 之datepicker

    通过JavaScript和jQuery代码,开发者可以轻松地在网页中集成datepicker功能,并通过选项配置来满足特定的需求,比如设定日期范围、显示格式等。代码中通常会包含丰富的注释来帮助理解各个配置项的作用和代码的执行...

    IOS中safari下的select下拉菜单文字过长不换行的解决方法

    在iOS的Safari浏览器中,`&lt;select&gt;`下拉菜单中的长文字选项可能会导致显示问题,尤其是当文字过长而不换行时,这会影响到用户体验。为了解决这个问题,开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...

    jQuery 常用代码集锦(必看篇)

    对于下拉列表,设置选项索引为-1,这样可以确保表单在下次显示时能够被用户重新填写。 最后,禁止多次递交表单还包括在表单中禁用回车键提交的功能。通常,表单中的输入框在用户按下回车键时会导致表单提交。通过为...

    jquery日期组件

    4. **禁用特定日期**:可以禁止用户选择某些特定的日期,如节假日或非工作日。 5. **事件监听**:可以监听日期选择事件,方便在用户选择日期后执行相应的操作,如计算日期差或更新其他元素。 6. **可访问性**:确保...

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    `属性来隐藏滚动条并禁止滚动,而在IE6、7中,由于`overflow`属性可能不生效,需要同时给`html`元素也添加相同的`overflow: hidden;`属性。这样,即使在内容超出视窗时,用户也不会看到滚动条,也无法滚动页面内容。...

    分享20个提升网站界面体验的jQuery插件

    19. Select Or Die:美化下拉选择框的插件,提供了多种功能,如多级菜单、禁止选择等。 20. Headhesive:固定顶部导航的特效插件,类似于scroll to top功能,保证导航始终可见。 这些插件的出现不仅提升了网站的...

    ExtJS4中文教程2 开发笔记 chm

    JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ==============...

    jquery-ui_dialog属性学习.txt

    ### jQuery UI Dialog 属性详解 #### 一、`autoOpen` 属性 - **默认值**:`true` ...以上是 jQuery UI Dialog 插件中常用的一些配置选项,通过这些选项我们可以非常灵活地定制和管理对话框的行为和外观。

Global site tag (gtag.js) - Google Analytics