Layui-button

Layui-button

项目过程中遇到了这个问题，思路很简单，方法也很简单，没想到花了好几个小时都没搞出来，还好最后时刻找到了问题解决办法——layui的button具有刷新页面的功能，因此：所写的jQuery方法只在点击button的一瞬起作用，所以改了无数次都以为没效果。（1）将button标签替换为< input type=‘button’ />标签；（2）替换为a标签：

我要的操作

在信息展示为只读的情况下，点击编辑按钮将id="tel"的input修改为可编辑，同时显示另外两个操作按钮：

                        <form class="layui-form" style="margin-left: -90px" action="" id="formaddtea">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">账号名　label>
                                        <div class="layui-input-block">
                                            <input id="realname" class="layui-input" type="text" style="float: left;position: relative;border: 0px;background-color: #dee2e5;color: #666868;" name="realname" readonly unselectable="on" value="123456">
                                        div>
                                    div>
                                div>
                                <div class="layui-col-xs6">
                                    

                                        <label class="layui-form-label">姓　　名label>
                                        <div class="layui-input-block">
                                            <input id="name" class="layui-input" type="text" style="float: left;position: relative;border: 0px;background-color: #dee2e5;color: #666868;" name="name" readonly unselectable="on" value="肖锋">
                                        div>
                                    div>
                                div>
                            div>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">电　　话label>
                                        <div class="layui-input-block">
                                            <input id="tel" class="layui-input" type="text"
                                                   style="float: left;position: relative;border: 0px;background: #dee2e5;color: #666868;"
                                                   name="tel" value="18469108811" >
                                        div>
                                    div>
                                div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-left: 15%">
                                        <label class="layui-form-label">性　　别label>
                                        <div class="layui-input-block" name="sex">
                                            <input id="sex" class="layui-input" type="text" style="float: left;position: relative;border: 0px;background-color: #dee2e5;color: #666868;" name="sex" readonly unselectable="on" value="男">
                                        div>
                                    div>
                                div>
                            div>
                            <div style="width: 100%; height: 100px;line-height: 100px;text-align: right">
                                <a id="hide" class="layui-btn layui-btn-primary">编辑a>
                                <button id="hide1" class="layui-btn">操作1button>
                                <button id="hide1" class="layui-btn">操作2button>
                            div>
                        form>

<script type="text/javascript">
$("#tel").prop("readonly", "true");//设置为只读
    $("#hide1").hide();//隐藏
    $("#hide2").hide();//隐藏

    $(document).ready(function(){
        $("#hide").click(function(){//点击触发
            $("#hide").hide();
            $("#hide1").show();//显示
            $("#hide2").show();
            $("#tel").removeProp("readonly");//移除readonly属性
        });
    });
script>

特作记录，仅供参考。