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

Question

我从数据库中获取了我的文本字段的价值，它工作得非常好。

1. 我想创建一个复选框，当单击复选框时，来自数据库的值将在文本字段和文本文件中清除，允许用户输入新值。

2. 如果未单击复选框，则来自数据库的值将是只读/未修改/禁用。文本字段不允许用户进行编辑。

我正在使用此代码：

<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() {&nbsp; &nbsp;var checkBox = document.getElementById("myCheck");&nbsp; &nbsp;var text = document.getElementById("textdis");&nbsp; &nbsp;var field= document.getElementById("full_name");&nbsp; &nbsp;if (checkBox.checked == true){&nbsp; &nbsp; &nbsp; text.style.display = "block";&nbsp; &nbsp; &nbsp; field.disabled=false;&nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; text.style.display = "none";&nbsp; &nbsp; &nbsp; field.disabled=true;&nbsp; &nbsp;}}我建议您添加一些服务器端验证以及您使用的任何语言。

Answer 2

我建议您在未选中复选框时在文本框上设置禁用状态，并在复选框的更改时切换此禁用状态。HTML<input type="checkbox" id="myCheck"&nbsp; onChange="myFunction()">JSvar nameText = document.getElementById('full_name');var checkBox = document.getElementById('myCheck');function myFunction() {&nbsp; &nbsp; if (checkBox.checked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nameText.disabled = false;&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; nameText.disabled = true;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }