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>
运行效果: