简单的方法

$('#yourform .YOUR_CLASS_FOR_INPUTS').prop('readonly', true);

你可以使用这个函数禁用表单:

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

点击这里查看工作演示

注意，它使用jQuery。

不是所有的表单元素都可以设置为只读，例如:

复选框 无线电盒子 文件上传 …更多. .

那么合理的解决方案是将所有表单元素的disabled属性设置为true，因为OP没有声明应该将特定的“锁定”表单发送到服务器(disabled属性不允许这样做)。

另一种解决方案，如下面的演示所示，是在表单元素的顶部放置一个层，这将阻止与表单元素内所有元素的任何交互，因为该层设置了更大的z-index值:

演示:

var form = document.forms[0], // form element to be "readonly" btn1 = document.querySelectorAll('button')[0], btn2 = document.querySelectorAll('button')[1] btn1.addEventListener('click', lockForm) btn2.addEventListener('click', lockFormByCSS) function lockForm(){ btn1.classList.toggle('on'); [].slice.call( form.elements ).forEach(function(item){ item.disabled = !item.disabled; }); } function lockFormByCSS(){ btn2.classList.toggle('on'); form.classList.toggle('lock'); } form{ position:relative; } form.lock::before{ content:''; position:absolute; z-index:999; top:0; right:0; bottom:0; left:0; } button.on{ color:red; } <button type='button'>Lock / Unlock Form</button> <button type='button'>Lock / Unlock Form (with CSS)</button> <br><br> <form> <fieldset> <legend>Some Form</legend> <input placeholder='text input'> <br><br> <input type='file'> <br><br> <textarea placeholder='textarea'></textarea> <br><br> <label><input type='checkbox'>Checkbox</label> <br><br> <label><input type='radio' name='r'>option 1</label> <label><input type='radio' name='r' checked>option 2</label> <label><input type='radio' name='r'>option 3</label> <br><br> <select> <option>options 1</option> <option>options 2</option> <option selected>options 3</option> </select> </fieldset> </form>

所有浏览器都支持的另一种简单方式是:

HTML:

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS:

.disabled {
  pointer-events: none;
  opacity: .4;
}

但是请注意，这种方法下的标签仍然有效，用户仍然可以操作带有焦点的元素。

一个简单的需求:用最少的代码显示不可编辑的表单(以后可以变成可编辑的表单)。

如果你不能使用'disabled'属性(因为它在POST时擦除值的输入)，并注意到html属性'readonly'只适用于textarea和一些输入(文本，密码，搜索，据我所见)，最后，如果你不想麻烦复制所有的选择，复选框和无线电与隐藏的输入逻辑， 你可能会发现下面的函数或他的任何内部逻辑符合你的喜好:

addReadOnlyToFormElements = function (idElement) { // textarea an input of type (text password search) work with the html readonly $('#' + idElement + ' textarea, #' + idElement + ' input').prop('readonly',true); // but you still have to destroy their associated objects, as I.E, datepicker (in our old project, datepicker is appended to input where 'Date' is in name attribut, don't ask why) $('#' + idElement + ' input[name*="Date"]').datepicker('destroy'); // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items $('#' + idElement + ' input[type="checkbox"]:not(:checked), #' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',true); $('#' + idElement + ' select>option:not([selected])').prop('disabled',true); // and, on the selected ones, to disable mouse/keyoard events and mimic readOnly appearance $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5'); $('#' + idElement + ' input[type="radio"]:checked').css('opacity','0.5'); $('#' + idElement + ' select').css('background-color','#eee'); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

没有什么比删除这些只读更容易的了

removeReadOnlyFromFormElements = function (idElement) { // just remove the html readonly on textarea and input $('#' + idElement + ' textarea, #' + idElement + ' input').prop('readonly',false); // and restore their Objects, as I.E, datepicker $('#' + idElement + ' input[name*="Date"]').datepicker(); // Remove the disabled attribut on non-selected $('#' + idElement + ' input[type="checkbox"]:not(:checked), #' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',false); $('#' + idElement + ' select>option:not([selected])').prop('disabled',false); // Restore mouse/keyboard events and remove readOnly appearance on selected ones $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity',''); $('#' + idElement + ' input[type="radio"]:checked').css('opacity',''); $('#' + idElement + ' select').css('background-color',''); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你可以在表单上使用一个不透明的图层:

放置位置:相对于表格 添加透明块div作为这个表单的子元素，position: absolute，并且上、下、左、右等于0