我有两页HTML表单。第一页有一个提交表单，第二页有一个确认表单。第一个表单提供了许多控件的选择，而第二个页面再次显示来自提交表单的数据，并显示确认消息。在第二种形式中，所有字段必须是静态的。
从我所看到的，一些表单控件可以是只读的，所有控件都可以被禁用，区别在于你仍然可以选择一个只读字段。
而不是按字段做这个是否有任何方法标记整个表单为只读/禁用/静态，这样用户就不能改变任何控件?
当前回答
这是禁用指定元素中的所有输入、文本区域、选择和按钮的理想解决方案。
对于jQuery 1.6及以上版本:
// To fully disable elements
$('#myForm :input').prop('disabled', true);
Or
// To make elements readonly
$('#myForm :input').prop('readonly', true);
jQuery 1.5及以下版本:
$('#myForm :input').prop('disabled', 'disabled');
And
$('#myForm :input').prop('readonly', 'readonly');
其他回答
你可以在表单上使用一个不透明的图层:
放置位置:相对于表格 添加透明块div作为这个表单的子元素，position: absolute，并且上、下、左、右等于0
<form inert>
这不会改变表单的样式，但会阻止所有输入的可聚焦性和任何按钮的可点击性。
在确认页面上，不要将内容放在可编辑控件中，只需将它们写入页面。
不是所有的表单元素都可以设置为只读，例如:
复选框 无线电盒子 文件上传 …更多. .
那么合理的解决方案是将所有表单元素的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>
简单的方法
$('#yourform .YOUR_CLASS_FOR_INPUTS').prop('readonly', true);
