当用户点击编辑按钮时input变成可编辑状态

类似51job网上，用户点击编辑后，个人信息可以编辑的功能。

编辑前状态：

实际上，我们看到的编辑前的input添加了以下样式：

.readonly{
border:none; 
background-color:inherit
}

所以看上去，是没有边框的，而且背景色继承了父容器的颜色。

-------------------------------------------------------------

 

当用户点击“编辑”按钮后

 

点击“编辑按钮”会触发以下js：

$('#editMyBasicInfoBtn').click(function(){
				 $(this).parents('form') // For each element, pick the ancestor that's a form tag.
					   .find(':input') // Find all the input elements under those.
					   .each(function(i) {
						$(this).prop("readonly",false);
						$(this).removeClass("readonly");
				});
				
			});

以上代码会移除.readonly样式.所以表单看起来变成了可编辑状态。

而真正控制表单input能不能编辑的属性是readonly="readonly".


-------------------------------------------------------------

以下是完整代码，将以下代码保存为test.html即可测试效果。

Basic Information


  

    

      
Employee ID:
      

	  
      
Employee Name:
      

    
	

      
Gender:
      

   
      
Birthday:
      

    
	
    

      
Email:
      

  
      
Mobile Phone:
      

    
	

      

      
 
	  

	  

    
  

转载于:https://www.cnblogs.com/phpcode/archive/2012/05/09/2522770.html