时间戳

首页 > 解决方案 > 使用jquery单击后退按钮后输入字段没有被禁用

javascript - 使用jquery单击后退按钮后输入字段没有被禁用

问题描述

打开表单后，单击编辑按钮后，所有输入字段和选择字段都处于禁用模式，这些字段将处于可编辑格式。

一旦我单击编辑按钮，文本将更改为后退按钮，一旦我单击后退按钮，文本将是编辑按钮，但问题是一旦我单击后退按钮，文本将更改为成功编辑，但字段也应该从可编辑模式禁用模式。

$('input').attr('disabled', true);															 
$('.editbutton').on('click', function(e) {												   e.preventDefault();																 
  $('input').attr('disabled', false);															 
})															 
$('select').attr('disabled', true);															 
$('.editbutton').on('click', function(e) {											     e.preventDefault();																 
  $('select').attr('disabled', false);
})

function myFunction() {
  var btn = document.getElementById("myButton");
  if (btn.value == "Edit") {
    btn.value = "Back";																	 
    btn.innerHTML = "Back";
  }
  else {
    btn.value = "Edit";																	 
    btn.innerHTML = "Edit";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  id="myButton"  onclick="myFunction()" class="btn btn-default editbutton" value="Edit">Edit</button>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="first-name">First Name</label>
  <input type="text" id="first-name" value="Doctor" class="form-control validate">          
</div>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="last-name">Last Name</label>
  <input type="text" id="last-name" value="p" class="form-control validate">          
</div>														
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="email">Email</label>
  <input type="email" id="email" value="doctor@gmail.com" class="form-control validate">          
</div>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="phone-number">Phone Number</label>
  <input type="text" id="phone-number" value="1234567890" class="form-control validate">          
</div>														
<div class="md-form col-md-2">
  <label data-error="wrong" data-success="right" for="isverified">Is Verified?</label><br/>
  <input type="checkbox" name="verified" value="verified" checked> </div>					
<button class="btn btn-default">Update Profile</button>

标签： javascriptjqueryhtml

解决方案

只需检查您的button文本并启用，基于此禁用。

$('input').attr('disabled', true);
$('select').attr('disabled', true);
$('.editbutton').on('click', function(e) {

  let txt = $(this).text();
  e.preventDefault();
  if (txt == "Edit") {
    $('input').attr('disabled', true);
    $('select').attr('disabled', true);
  } else {
    $('input').attr('disabled', false);
    $('select').attr('disabled', false);

  }
})


function myFunction() {
  var btn = document.getElementById("myButton");
  if (btn.value == "Edit") {
    btn.value = "Back";
    btn.innerHTML = "Back";
  } else {
    btn.value = "Edit";
    btn.innerHTML = "Edit";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="myButton" onclick="myFunction()" class="btn btn-default editbutton" value="Edit">Edit</button>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="first-name">First Name</label>
  <input type="text" id="first-name" value="Doctor" class="form-control validate">
</div>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="last-name">Last Name</label>
  <input type="text" id="last-name" value="p" class="form-control validate">
</div>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="email">Email</label>
  <input type="email" id="email" value="doctor@gmail.com" class="form-control validate">
</div>
<div class="md-form col-md-5">
  <label data-error="wrong" data-success="right" for="phone-number">Phone Number</label>
  <input type="text" id="phone-number" value="1234567890" class="form-control validate">
</div>
<div class="md-form col-md-2">
  <label data-error="wrong" data-success="right" for="isverified">Is Verified?</label><br/>
  <input type="checkbox" name="verified" value="verified" checked>
</div>
<button class="btn btn-default">Update Profile</button>

推荐阅读