Как включить текстовое поле для редактирования с использованием 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

Я бы посоветовал вам поместить отключенное состояние в текстовое поле, когда флажок не установлен, и переключить это отключенное состояние на изменение флажка.

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

Answer 2

Измените "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;
   }
}

Я предлагаю вам добавить проверку на стороне сервера какхорошо на том языке, который вы используете.