时间戳

首页 > 解决方案 > 如何使整个表单只读/禁用，但是当单击按钮时应该启用它

javascript - 如何使整个表单只读/禁用，但是当单击按钮时应该启用它

问题描述

也许以前有人问过这个问题，但就我而言，发生了错误。我使用 jquery 遵循了此处的指南。

在我的情况下：单击按钮时，表单更改为启用，但只有一秒钟。然后表单更改为再次禁用。

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)
});

表单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>

标签： javascriptjqueryhtml

解决方案

您需要将disabled属性设置为disabled我知道这很混乱的值，

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

要重新启用它们，您只需删除该属性disabled。

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

不要依赖将属性设置为，true/false因为不同的浏览器不支持这种方式。

$(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：由于某种原因，当我的代码运行以重新启用控件时，StackOverflow 代码段会出错。但是，在出现错误消息之前，您可以看到控件再次启用。

推荐阅读