javascript - 使用 jquery 单击后退按钮后，输入字段不会被禁用

Question

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

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

$('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>

Answer 1

您尝试使用 removeAttr() 删除您想要的属性:

$('input').attr('disabled', true);    
$('select').attr('disabled', true);  
$('#myButton').on('click', function(e) {                      
  e.preventDefault();  
  if($('input').attr('disabled')){
    $('input').removeAttr('disabled');    
    $('select').removeAttr('disabled');
    this.textContent = "Back";
  }
  else{
    $('input').attr('disabled', true);    
    $('select').attr('disabled', true);
    this.textContent = "Edit";
  }                                                            
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  id="myButton" 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>