如图 ！文本框设置成不可修改样式，如何通过按钮进行调整，成可修改的文本框

img


<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
       <input type="text" name="weizhi"   th:value="*{weizhi}" 
           id="weizhi"   required="required"  onfocus=this.blur() value="123"
        style="border="1px solid red";width: 180px; height: 25px;margin-top: 6px;background-color:transparent;border:0;">
        <button type="submit" class="layui-btn layui-btn-warm layui-btn-radius" style="width: 80px;height: 30px;" onclick="xiugai1()">
                    <p style="margin-top: -3px;color: black;font-weight: bold">修改</p></button>
    </body>
    </form>
    <script>
        function xiugai1(){
            ???
    </script>
</html>

setAttribute(‘readOnly’,true)

//文本框设置 只读属性 加上 readonly="readonly"

var dom = document.getElementById("weizhi");
dom.readOnly="";//可读


<input type="text" name="weizhi" id="weizhi" value="123"
        style="border:1px solid red;width: 180px; height: 25px;margin-top: 6px;background-color:transparent;" readonly="true">
function xiugai1(){
            document.getElementById('weizhi').removeAttribute('readonly')
        }

使用input的readOnly属性。具体代码如下：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <input type="text"  id="valueText" readonly="readonly" value="ok"/>
    <button type="submit" id="changeBtn">修改</button>
    <script>
        document.getElementById("changeBtn").addEventListener("click",clickHandler);
        function clickHandler()
        {
            document.getElementById("valueText").readOnly="";
        }
    </script>
    </body>
</html>

表单内的button，设置type='button'，不然会自动get提交，修改是修改，提交是提交 弄俩按钮。
点击修改input可变修改，直接移除限制输入的属性即可。


        function xiugai1() {
        var input_obj = document.getElementById('weizhi');
        input_obj.removeAttribute('onfocus');
        }

如下，如有帮助，望采纳，谢谢


<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form>
        <input id="xiugai1" disabled="true" value="123" />

        <input type="button" value="可修改" onclick="Can()" />
        <input type="button" value="不可修改" onclick="NotCan()" />

    </form>
    <script>
        //可修改
        function Can() {
            document.getElementById("xiugai1").removeAttribute("disabled");
        }
        //不可修改
        function NotCan() {
            document.getElementById("xiugai1").setAttribute("disabled", true);
        }
        
    </script>
</body>
</html>