[jQuery]選取器--狀態enabled, disabled, checked, selected

[jQuery]選取器--狀態enabled, disabled, checked, selected

語法:

  • 取得enabled/disabled的input
    • $('input:enabled')
    • $('input:disabled')
  • 鎖定enabled的input改為disabled
    • $('input:enabled').attr({disabled:"disabled"});
  • 有checked的checkbox變成disabled
    • $('input:checked').attr({disabled:"disabled"});

範例:

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('input:enabled').addClass('d1');
					$('input:disabled').addClass('d2');
				});
				$('#btn2').click(function(){
					$('input:enabled').attr({disabled:"disabled"});
				});
				$('#btn3').click(function(){
					$('input:checked').attr({disabled:"disabled"});
				});
			})
		</Script>
		<Style type="text/css">
			.d1
			{
				background-color:red;
				color:green;
			}
			.d2
			{
				background-color:orange;
				color:blue;
			}
			.d3
			{
				background-color:yellow;
				color:blue;
			}
			.d4
			{
				background-color:green;
				color:red;
			}
		</Style>
	</HEAD>
	<BODY>
		<input type="button" id="btn1" name="btn1" value="依照Enabled/disabled改變顏色"><br>
		<input type="button" id="btn2" name="btn2" value="改變Enabled/Disabled狀態"><br>
		<hr />
		<input type="text" id="txt1" value="" />
		<input type="text" id="txt2" value="" disabled />
		<hr />
		<INPUT type="button" value="鎖住已經勾選的" id=btn3 name=btn3>
		<INPUT type="checkbox" id=checkbox1 name=checkbox1>
		<INPUT type="checkbox" id=checkbox2 name=checkbox2>
		<INPUT type="checkbox" id=checkbox3 name=checkbox3>
		
	</BODY>
</HTML>

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat