Layui-button

Layui-button

專案過程中遇到了這個問題，思路很簡單，方法也很簡單，沒想到花了好幾個小時都沒搞出來，還好最後時刻找到了問題解決辦法——layui的button具有重新整理頁面的功能，因此：所寫的jQuery方法只在點選button的一瞬起作用，所以改了無數次都以為沒效果。（1）將button標籤替換為< input type=‘button’ />標籤；（2）替換為a標籤：<a class="layui-btn layui-btn-primary">

我要的操作

在資訊展示為只讀的情況下，點選編輯按鈕將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">賬號名&#12288;</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">
                                    <div class="layui-form-item"style="margin-left: 15%">
                                        <label class="layui-form-label">姓&#12288;&#12288;名</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">電&#12288;&#12288;話</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">性&#12288;&#12288;別</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">操作1</button>
                                <button id="hide1" class="layui-btn">操作2</button>
                            </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>

特作記錄，僅供參考。