Question

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

当我点击保存按钮时，输入字段将保存在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>

Answer 1

试试这个：

$(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>

Answer 2

我不确定是否会回答您的问题但如果您希望在点击时启用/禁用您的输入，则可能需要使用此功能：

<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输入作为编辑按钮的原因。

Answer 3

请参阅此处的示例。在两个函数中使用.disabled属性：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

禁用并启用文本框以进行编辑和保存信息

3 个答案: