编辑资料和保存

在做项目的过程中，肯定是涉及到用户的，而用户的一些基本信息，用户应该是可以作修改的，对于这个功能一般都叫做编辑资料和保存，下面看个简单的例子吧。

首先就把页面搭建好，这里就简单的搭建了一个，代码如下图所示：

   

就是简单的一个form表单，再有一些label标签和input标签，还有select标签，然后就是给select标签和input标签都添加了disabled属性，让它们禁用，再剩下的就是两个按钮了，一个编辑和保存，最后再都写一些简单的css样式，页面就简单搭建好了。

效果如下图所示：

这样看上去也像是简单的个人资料了，现在可以看到那select标签和input标签都是没有值的，而且也无法输入值，下面要实现的就是当点击编辑按钮的时候，就能输入值，而且编辑按钮换成保存按钮，再点击保存就可以将值暂时保存到页面。下面就来看下如何实现的吧。代码如下图所示：

看完代码以后发现其实也很简单，只是用了prop()、css()两个方法就实现了。主要就是利用prop()方法获取到disabled属性，然后将其设为空值，就可以让select标签和input标签启用了。再看下面的代码就是和上面的反过来了，启用以后就再禁用，样式也设置回去。

下面就看看点击编辑以后启用的select标签和input标签，如下图所示：

这样也就可以输入值了。然后再点击保存就又将其禁用了，下面看看效果，如下图所示：

     

这样就完成了简单的编辑和保存，不过这只是在网页上的效果，要真正的修改保存，还是需要涉及到数据库，就要到控制器写方法，然后再到视图调用，这样就能实现真正的编辑和保存了。以上只是一个简单的例子，可供大家学习参考。