jQuery禁止并灰显下拉选项

卡奇莫多

2015-10-24

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>

运行效果：
jQuery禁止并灰显下拉选项

如要通过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>

运行效果：
jQuery禁止并灰显下拉选项
当然，如果不给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>

运行效果：
jQuery禁止并灰显下拉选项