这种表单切换效果如何实现？

Question

做一个可编辑的表单的域（不一定是表单），点击右上角编辑后，下面的控件变为可编辑状态，入图1变为图2状态
记得很多网站的个人设置里面都有这种，但是现在没有思路，望大佬们给个思路或者demo
另外，是否开启的switch，bootstrap3里有轮子么？

图1.

图2.

Answer 1

可以提供下思路。我觉得可以这样。

 <span>09:30</span><input type='text' />

没点编辑的时候，默认全用span显示，input默认隐藏；
点编辑之后，span隐藏，显示input。 编辑完成，替换同级span的值，隐藏input显示span。
用vue.js就可以，绑定class类，绑定input值，更简单。 好多方法。

Answer 2

原理就是一个div里面包含了显示的span和隐藏的input，input的val和span的文本一样，点击后span隐藏，input显示，就这样，操作时两个的值隐藏和显示时隐藏那个把值赋给显示那个就行了

Answer 3

1、用tpl可以写两套模板，展示模板，编辑模板，总之设置数据是要加载时请求的，编辑数据保存后也要传给后端，这样比较清晰，两个流程独立互补影响。布局没什么说的，前端基础，主要是你这个时间这里要做成输入的还是插件式的滚动选中，涉及时间插件
2、直接写个编辑的布局

<div class="tips-box">
    <p>
    <span>提示闹钟设置</span>
    <span class="edit-icon js-edite"></span>
    </p>
    <lable>是否开启</lable><input type="hidden" name="" value="1是0否">//css+js写个切换按钮控制隐藏域值1||0
    <lable>短信提醒时段</lable><input type="text" name="start-time"> - <input type="text" name="end-time">//
    <lable>涨幅提醒金额</lable><input type="text" name="up-money">
    <lable>涨幅提醒金额</lable><input type="text" name="low-money">
</div>

编辑的时候就是这样，正常的input标签，当点击js-edite和编辑之后的保存按钮时我们可以给所有input加上或者去掉disabled来控制input的是否可编辑，tips-box上加上或者去掉一个class来控制这些input的样式，基本就是加上去掉border，width，height这些简单

是否开启的switch按钮可以用css+js写一个很简单，原理就是控制按钮样式下面的input隐藏域值的变化
我写过的一个demo由于是嵌在摸个模块里的就拿出一大题的代码看看吧
<span class="js-show" data-show="0"><i class="pintr-point"></i></span>

$(".js-show").on("click",function(){
    var that = this;
    if($(that).data("show") == 0){           //left值按照你的实际自己算就是小圆点的移动值
        $(that).find(".pintr-point").animate({left:"24px"},300,function(){
            $(that).data("show","1");
            $("input[type=hidden]").val("1")
        });
    }else{
        $(that).find(".pintr-point").animate({left:"2px"},300,function(){
            $(that).data("show","0");
            $("input[type=hidden]").val("0")
        });
    }
})

Answer 4

其实你的所有选项都可以用input标签，只需要加一个disabled，当你点击编辑的时候取消这个属性，重置的时候可以ajax提交数据，并且把返回值赋值以后在添加上disabled属性就可以了