jquery 中prop的使用以及一些要注意的问题

近有网友提出jquery做全选和取消全选这些操作时，只能执行一遍，后面追查下去，发现了问题的根源，发现用jquery中的removeProp对checked操作是会完全移除了元素的属性，以至于使用removeProp后再使用prop设置属性就没有效果了？？

于是查找到了官网，终于发现了

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是可以这样的

<!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>

有兴趣的可以测试一下。

来源：oschina

链接：https://my.oschina.net/u/143411/blog/193451

标签

jquery

prop

checked

bug