如何启用文本字段以使用 javascript 和 html 进行编辑？

Question

我从数据库中获取了我的文本字段的价值，它工作得非常好。我想创建一个复选框，当单击复选框时，来自数据库的值将在文本字段和文本文件中清除，允许用户输入新值。如果未单击复选框，则来自数据库的值将是只读/未修改/禁用。文本字段不允许用户进行编辑。我正在使用此代码：<div>Enter New Details: <input type="checkbox" id="myCheck"  onclick="myFunction()"><p id="textdis" style="display:none">Checkbox is CHECKED!</p><hr><br><label for="full_name">Full Name:</label><input class="form-control" type="text" name="full_name"  id="full_name" value="<?=$fullname;?>" readonly></div><!-- // Check Box Functionality For Enter New Address --><script>function myFunction() {var checkBox = document.getElementById("myCheck");var text = document.getElementById("textdis");if (checkBox.checked == true){ text.style.display = "block";<!-- Here I want If the checkbox is clicked allow the user to enter value in the textfield--><input class="form-control" type="text" name="full_name"  id="full_name" disabled="enabled">} else {  text.style.display = "none";<!-- Here I want If the checkbox unclicked take value from the database and don't allow user to edit the textfield--><input class="form-control" type="text" name="full_name"  id="full_name" value="<?=$fullname;?>" readonly>}}</script>单击复选框时，文本字段不允许编辑。

Answer 1

将“onclick”更改为“onchange”

onchange="myFunction()"

根据复选框值切换输入的禁用属性

function myFunction() {

   var checkBox = document.getElementById("myCheck");

   var text = document.getElementById("textdis");

   var field= document.getElementById("full_name");

   if (checkBox.checked == true){

      text.style.display = "block";

      field.disabled=false;

   } else {

      text.style.display = "none";

      field.disabled=true;

   }

}

我建议您添加一些服务器端验证以及您使用的任何语言。

Answer 2

我建议您在未选中复选框时在文本框上设置禁用状态，并在复选框的更改时切换此禁用状态。

HTML

<input type="checkbox" id="myCheck"  onChange="myFunction()">

JS

var nameText = document.getElementById('full_name');

var checkBox = document.getElementById('myCheck');

function myFunction() {

    if (checkBox.checked) {

         nameText.disabled = false;

     } else {

        nameText.disabled = true;

     }

    }