How to make entire form readonly /disabled but when a button clicked it should be enabled

Question

maybe this question has been asked before, but for my case, an error occurred. I have followed the guidelines here by using jquery.

In my case: When the button is clicked the form changes to enable, but only one second. Then the form changes to be disabled again.

jquery

$(document).ready(function() {
   $('.toggleInputs').find('input').prop('disabled', true); 
   $('.toggleInputs').find('select').prop('disabled', true);
   $('.toggleInputs').find('textarea').prop('disabled', true);   
  });

  $('#btnEdit').on('click', function() {
   $('.toggleInputs').find('input').prop('disabled', false); 
   $('.toggleInputs').find('select').prop('disabled', false);
   $('.toggleInputs').find('textarea').prop('disabled', false)
});

form html

<form class="toggleInputs" method="post" action="">
           <div class="form-group row">
            <label class="col-md-3 col-form-label">NIS</label> 
            <div class="col-md-2">
             <input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text" >
            </div>
            <div class="col-md-2">
             <button id="btnEdit" class="btn btn-danger">UBAH</button>
            </div>
           </div>
           <div class="form-group row">
            <label class="col-md-3 col-form-label">NAMA LENGKAP</label> 
            <div class="col-md-5">
             <input  id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
            </div>
           </div>
           <div class="form-group row">
            <label class="col-md-3 col-form-label">TEMPAT LAHIR</label> 
            <div class="col-md-3">
             <input  value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
            </div>
            <label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
            <div class="col-md-3">
             <input  value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
            </div>
           </div>
           <div class="form-group row">
            <label  class="col-md-3 col-form-label">JENIS KELAMIN</label> 
            <div class="col-md-4">
             <select name="jenisKelamin" class="form-control"><option class="form-control" selected>Laki-laki</option>
             <option class="form-control" >Perempuan</option>
             </select>
            </div>
           </div>
           <div class="form-group row">
            <label  class="col-md-3 col-form-label" readonly>ALAMAT</label> 
            <div class="col-md-5">
             <textarea  name="infoguru" cols="40" rows="4" class="form-control" ><?php echo $alamatSiswa;?></textarea>
            </div>
           </div>
           
</form>          

Answer 1

You need to set disabled property to the value disabled I know it is confusing,

  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
       .prop("disabled","disabled");

and to enable them back, you just remove the property disabled.

  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
       .removeProp("disabled");

Don't rely on setting the property to true/false because different browsers don't support it that way.

$(document).ready(function(){
  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').prop("disabled","disabled");
  
  $('#btnEdit').click(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').removeProp("disabled");
});
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form class="toggleInputs" method="post" action="">
  <div class="form-group row">
    <label class="col-md-3 col-form-label">NIS</label>
    <div class="col-md-2">
      <input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text">
    </div>
    <div class="col-md-2">
      <button id="btnEdit" class="btn btn-danger">UBAH</button>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label">NAMA LENGKAP</label>
    <div class="col-md-5">
      <input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
    <div class="col-md-3">
      <input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
    </div>
    <label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
    <div class="col-md-3">
      <input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label">JENIS KELAMIN</label>
    <div class="col-md-4">
      <select name="jenisKelamin" class="form-control">
        <option class="form-control" selected>Laki-laki</option>
        <option class="form-control">Perempuan</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label" readonly>ALAMAT</label>
    <div class="col-md-5">
      <textarea name="infoguru" cols="40" rows="4" class="form-control"><?php echo $alamatSiswa;?></textarea>
    </div>
  </div>

</form>

PS: For some reason, the StackOverflow snippet gives an error when my code runs to re-enable the controls back. But for a moment, you can witness the controls being enabled again, before the error message appears.

Answer 2

May be You have not referenced a jQuery library.

You have to include a line similar to this in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

If you referenced jQuery then change priority first add jQuery and then other js.