javascript - 如何在将表单输入的属性设置为 "false"后将其更改为禁用 = "true"

Question

我有一个通过 Ajax 提交的表单。用户发送表单后，文本会发生变化，显示数据已成功发送，然后显示已填写的表单。我想显示表单，但我不希望他们重新提交表单，因此我想禁用输入和提交按钮。我有3个操作，添加、更新和查看。禁用 View 中的表单输入后，在添加中保持禁用状态。

<div id="userModal" class="modal fade">
 <div class="modal-dialog">
  <form method="post" id="user_form" enctype="multipart/form-data">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title">Add Report</h4>
    </div>
    <div class="modal-body">
     <div class="row">
     <div class="col-xs-2">
         <label for="ex1">Square</label>
         <input type="text" name="square" id="square" class="form-control">
     </div>
     <div class="col-xs-2">
         <label for="ex1"> Number </label>
         <input type="text" name="report_number" id="report_number" class="form-control">
     </div>
     <div class="col-xs-4">
         <label>Report Date </label>
         <input type="date" name="report_date" id="report_date" class="form-control" />
     </div >
     </div>

     </br>

     <div class="row">
      <div class="col-xs-12">
         <label>Notes </label>
         <textarea rows="15" cols="80" type="text" name="notes" id="notes" class="form-control" > </textarea>
     </div >
     </div>

     <br />
     <label>Select Image</label>
     <input type="file" name="user_image" id="user_image" />
     <span id="user_uploaded_image"></span>
    </div>
    <div class="modal-footer">
     <input type="hidden" name="report_id" id="report_id" />
     <input type="hidden" name="operation" id="operation" />
     <input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </form>
 </div>
</div>


<script>

 $(document).on('submit', '#user_form', function(event){
  event.preventDefault();

  var addedSquare = $('#square').val();
  var addedNumber = $('#report_number').val();
  var addedDate = $('#report_date').val();
  var extension = $('#user_image').val().split('.').pop().toLowerCase();
  if(extension != '')
  {
   if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
   {
    alert("Invalid Image File");
    $('#user_image').val('');
    return false;
   }
  } 
  if(addedSquare != '' && addedNumber != '')
  {
   $.ajax({
    url:"insert.php",
    method:'POST',
    data:new FormData(this),
    contentType:false,
    processData:false,
    success:function(data)
    {

     alert(data);
     $('#user_form')[0].reset();
     $('#userModal').modal('hide');

     dataTable.ajax.reload();
    }
   });
  }
  else
  {
   alert("Both Fields are Required");
  }
 });

 $(document).on('click', '.update', function(){
  var report_id = $(this).attr("id");
  $.ajax({
   url:"fetch_single.php",
   method:"POST",
   data:{report_id:report_id},
   dataType:"json",
   success:function(data)
   {
    $('#userModal').modal('show');
    $('#square').val(data.square).prop( "disabled", false );
    $('#report_number').val(data.report_number).prop( "disabled", false );
    $('#report_date').val(data.report_date).prop( "disabled", false );
    $('.modal-title').text("Edit Report");
    $('#report_id').val(report_id);
    $('#user_uploaded_image').html(data.user_image);
    $('#action').val("Edit");
    $('#operation').val("Edit");
   }
  })
 });

 $(document).on('click', '.view', function(){
  var report_id = $(this).attr("id");
  $.ajax({
   url:"fetch_single.php",
   method:"POST",
   data:{report_id:report_id},
   dataType:"json",
   success:function(data)
   {
    $('#userModal').modal('show');
    $('#square').val(data.square).prop( "disabled", true );
    $('#report_number').val(data.report_number).prop( "disabled", true );
    $('#report_date').val(data.report_date).prop( "disabled", true );
    $('.modal-title').text("View Report");
    $('#report_id').val(report_id);
    $('#user_uploaded_image').html(data.user_image);
    $('#action').val("View");
    $('#operation').val("View");
   }
  })
 });


</script>

如何在 add 中再次启用输入？

Answer 1

只是 .prop( "disabled", false );