Question

也许这个问题曾经被问过，但是对于我来说，发生了一个错误。我通过使用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>

Answer 1

可能是您尚未引用jQuery库。

您必须在HTML中添加与此类似的行：

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

如果您引用了jQuery，然后更改优先级，请先添加jQuery，然后再添加其他js。

Answer 2

您需要将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片段给出了错误。但是片刻之后，您可以看到错误消息出现之前再次启用了控件。

如何将整个表单设为只读/禁用，但是当单击按钮时应启用它

2 个答案: