jquery 中prop的使用以及一些要注意的問題

時間 2019-11-06

原文原文鏈接

近有網友提出jquery作全選和取消全選這些操做時，只能執行一遍，後面追查下去，發現了問題的根源，發現用jquery中的removeProp對checked操做是會徹底移除了元素的屬性，以致於使用removeProp後再使用prop設置屬性就沒有效果了？？ javascript

因而查找到了官網，終於發現了 html

Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

這是jquery中的說明 http://api.jquery.com/removeProp/

因而html是能夠這樣的 java

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prop的使用</title>
</head>
<body>
<label><input type="checkbox" name="" id="checkAllWaitlist" />全選</label>
<br />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(function(){
		$('#checkAllWaitlist').click(function(){
			$('.waitSoldOrder').prop('checked',this.checked);
			//取消選中時不能使用 removeProp ,這樣會在第二次全選的時候發現下面的不能選中，由於使用removeProp會把該屬性從元素中移除 ，應該是使用prop 進行修改其狀態
			//下面是jquery官網的說明   http://api.jquery.com/removeProp/
			//Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
		});
	});
</script>
</body>
</html>

有興趣的能夠測試一下。 jquery