input编辑框编辑状态切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .ge_table{ 100%;}
        .ge_table td{ height:44px; line-height:26px;}
        .hide_border{border:none;padding-left: 5px;line-height: 26px;205px;height: 26px;}
        .ge_input{border:1px solid #ccc;padding-left:5px;line-height:26px;205px; height:26px;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<input name="name"  type="text" class="ge_input" warntip="#warn_name" vrel="ne=m:请输入商品名称|sz=max:50,min:2,m:最少2汉字,最多50个汉字" value="222" style=""/>
<input type="text" name="input1" value="中国" disabled="true">

<table cellpadding="0" cellspacing="0" border="0" class="ge_table">

    <tr>
        <td>收货人姓名:</td>
        <td >
            <input type="text" class="ge_input" id="inputConsignee" onblur="checkConsignee()" />
            <p id="consigneeMsg"></p>
        </td>
    </tr>
    <tr>
        <td class="td"><input type="button" class="button2"   id="sure" onclick="makeSure()" value="确认" />
            <input  type="button" class="button2" id="cancle" value="修改" onclick="updateMsg()" /></td>
    </tr>
</table>
</body>
<script type="text/javascript">

    function makeSure() {
        alert("1111");
        $("input.ge_input").each(function(){
            $(this).removeClass().addClass("hide_border").attr("readonly",true);
            console.log(this);
        });};
 
    function updateMsg(){
        alert("2222");
        $("input.hide_border").each(function(){
            $(this).removeClass().addClass("ge_input").attr("readonly",false);
        });
    };
</script>
</html>
请把你的疑问评论在下方。
原文地址:https://www.cnblogs.com/zzcit/p/5973165.html