禁用和启用用于编辑和保存信息的文本框 - Disable and enable textbox for edit and save information

我有这个表单，我尝试当我点击按钮编辑输入字段将是启用的，我可以编辑它的信息

当我点击保存按钮时，输入字段将被保存在mysql数据库中，文本字段将被禁用

我试着用下面的代码，但它没有工作

有什么建议吗?

<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='$category' disabled>
<input type='text' name='txt_stage' id='stage' value='$stage' disabled>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type='submit' name='edit' value='edit' onclick='myFunction()'>
<input type='submit' name='save' value='save' onclick='mysaveFunction()'>
</form>

/***********************************/

<script>
function myFunction() {   
document.getElementById('category').readOnly = true;
document.getElementById('stage').readOnly = true;
document.getElementById('approve').readOnly = true;
}
</script>

/**********************************/

 <script>
    function mysaveFunction() {   
    document.getElementById('category').disabled = true;
    document.getElementById('stage').disabled = true;
    document.getElementById('approve').disabled = true;
    }
    </script>

Try This:

$(document).ready(function(){
     $("form input[type=text],form input[type=checkbox]").prop("disabled",true);
     $("input[name=edit]").on("click",function(){
             $("input[type=text],input[type=checkbox]").removeAttr("disabled");
     })
     $("input[name=save]").on("click",function(){
         $("input[type=text],input[type=checkbox]").prop("disabled",true);
     })

 })

最终代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form name='' id='' action='' method='post'>
        <input type='text' name='txt_category' id='category' value='$category' disabled>
        <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
        <select disabled>
            <option>I am Option 1</option>
             <option>I am Option 2</option>
        </select>
        <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
        <input type="button" name='edit' value='edit'>
        <input type="button" name='save' value='save'>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
     $(document).ready(function(){
         $("form input[type=text],form input[type=checkbox]").prop("disabled",true);
         $("input[name=edit]").on("click",function(){
                 $("input[type=text],input[type=checkbox],select").removeAttr("disabled");
         })
         $("input[name=save]").on("click",function(){
             $("input[type=text],input[type=checkbox],select").prop("disabled",true);
         })
     })
    </script>
</body>
</html>

如果你想在表中使用，

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form name='' id='' action='' method='post'>
        
        <table>
            <tr>
                <td>
                    <input type='text' name='txt_category' id='category' value='$category' disabled>
                    <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
                    <select disabled>
                        <option>I am Option 1</option>
                         <option>I am Option 2</option>
                    </select>
                    <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
                    <input type="button" name='edit' value='edit'>
                    <input type="button" name='save' value='save'>
                </td>
            
            </tr>
            
            <tr>
                <td>
                    <input type='text' name='txt_category' id='category' value='$category' disabled>
                    <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
                    <select disabled>
                        <option>I am Option 1</option>
                         <option>I am Option 2</option>
                    </select>
                    <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
                    <input type="button" name='edit' value='edit'>
                    <input type="button" name='save' value='save'>
                </td>
            
            </tr>
        
        </table>
    
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
     $(document).ready(function(){
         $("form input[type=text],form input[type=checkbox]").prop("disabled",true);
         $("input[name=edit]").on("click",function(){
             $(this).closest("td").find("input[type=text],input[type=checkbox],select").removeAttr("disabled");
         })
         $("input[name=save]").on("click",function(){
            $(this).closest("td").find("input[type=text],input[type=checkbox],select").prop("disabled",true);
         })
     })
    </script>
</body>
</html>

我不确定这是否能回答你的问题，但如果你想在点击时启用/禁用输入，你可能想使用这个:

<input type='button' name='edit' value='edit' onclick='myFunction()'>

<script>
function myFunction() {   
    document.getElementById('category').disabled = false;
    document.getElementById('stage').disabled = false;
    document.getElementById('approve').disabled = false;
}
</script>

作为一个提交输入将重新加载你的页面，没有必要再次禁用你的输入，这也是为什么你不能使用submit输入的编辑按钮

请看这里的例子。在两个函数中使用.disabled属性:

function mysaveFunction() {   
    document.getElementById('category').disabled = true;
    document.getElementById('stage').disabled = true;
    document.getElementById('approve').disabled = true;
    }
function myFunction() {   
document.getElementById('category').disabled = false;
    document.getElementById('stage').disabled = false;
    document.getElementById('approve').disabled = false;
}

<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='$category' disabled>
<input type='text' name='txt_stage' id='stage' value='$stage' disabled>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type='button' name='edit' value='edit' onclick='myFunction()'>
<input type='submit' name='save' value='save' onclick='mysaveFunction()'>
</form>