Включить и отключить ввод текста при нажатии на ту же кнопку

Question

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

<script>
function toggle(){

        document.getElementById("Name").disabled = false;
        document.getElementById("email").disabled = false;
        document.getElementById("contact").disabled = false; 
            }

</script>

<form>
<input type="text" class="form-control" 
            name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />                                                               

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled /> 


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" 
    onclick="toggle()" >    
</form>

Пожалуйста, предложите, что мне нужно сделать, чтобы внести изменения в код.

Answer 1

Для достижения этого вам просто нужно инвертировать текущее значение disabled свойство на обязательные элементы. Для этого используйте ! оператор перед текущей настройкой, вот так:

function toggle() {
  document.getElementById("Name").disabled = !document.getElementById("Name").disabled;
  document.getElementById("pan").disabled = !document.getElementById("pan").disabled;
  document.getElementById("email").disabled = !document.getElementById("email").disabled;
  document.getElementById("contact").disabled = !document.getElementById("contact").disabled;
}

<form>
  <input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?= $name; ?>" disabled/>
  <input type="text" class="form-control" name="pan" id="pan" value="<?= $pan; ?>" disabled />
  <input type="email" class="form-control" name="mail" id="email" value="<?= $email; ?>" disabled />
  <input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?= $mobile; ?>" disabled />
  <input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
</form>

Answer 2

<button value="false"></button>

$('#btn_pause_resume').click(function () {
    if ($(this).data('value')==='false') {
        alert('Resumed...');
        $(this).data('value', 'true');
    } else {
        alert('Paused...');
        $(this).data('value', 'false');
    }
});

попробуйте это, вы должны получить идею

Answer 3

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

function toggle() {

  document.getElementById("Name").disabled = document.getElementById("Name").disabled ? false : true;
  document.getElementById("email").disabled = document.getElementById("email").disabled ? false : true;
  document.getElementById("contact").disabled = document.getElementById("contact").disabled ? false : true;
  document.getElementById("pan").disabled = document.getElementById("pan").disabled ? false : true;
}

<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">

Answer 4

function toggle() {
  var enable = (this.disabled);
  document.getElementById("Name").disabled = enable;
  document.getElementById("pan").disabled = enable
  document.getElementById("email").disabled = enable;
  document.getElementById("contact").disabled = enable;
};

<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">