没有完全兼容的、官方的HTML方法来做到这一点，但一点javascript就可以大有帮助。 您将遇到的另一个问题是，禁用的字段不会显示在POST数据中

没有内置的方法，我知道这样做，所以你需要提出一个自定义解决方案，取决于你的表单有多复杂。你应该读读这篇文章:

将HTML表单转换为只读(更新:损坏的文章链接，存档链接)

EDIT: Based on your update, why are you so worried about having it read-only? You can do it via client-side but if not you will have to add the required tag to each control or convert the data and display it as raw text with no controls. If you are trying to make it read-only so that the next post will be unmodified then you have a problem because anyone can mess with the post to produce whatever they want so when you do in fact finally receive the data you better be checking it again to make sure it is valid.

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

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

点击这里查看工作演示

注意，它使用jQuery。

将所有表单id编号，并在JS中运行for循环。

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

在确认页面上，不要将内容放在可编辑控件中，只需将它们写入页面。

将输入字段和其他内容包装到<fieldset>中，并赋予其disabled="disabled"属性。

示例(http://jsfiddle.net/7qGHN/):

< >形式 <自定义字段禁用= "禁用" > <input type="text" name="something" placeholder="enter some text" /> <选择> <option value="0" disabled="disabled" selected="selected">select something </option> <选项值= " 1 " >游戏> < /选项 <选项值= " 2 " > < /选项> 这<选项值= " 3 " > < /选项> < /选择> < /自定义字段> > < /形式

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

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

那么合理的解决方案是将所有表单元素的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>

我宁愿使用jQuery:

$('#'+formID).find(':input').attr('disabled', 'disabled');

Find()将比children()深入到第n个嵌套子，children()只查找直接子。

简单的方法

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

这是禁用指定元素中的所有输入、文本区域、选择和按钮的理想解决方案。

对于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');

你在表单上添加html隐形层。例如

<div class="coverContainer">
<form></form>
</div>

和风格:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

当然用户可以在浏览器中隐藏这一层。

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

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>

要在angular中有条件地禁用整个fieldset，你可以这样做:

 <fieldset [attr.disabled]="isEditable ? null : 'disabled'">

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

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

<form inert>

这不会改变表单的样式，但会阻止所有输入的可聚焦性和任何按钮的可点击性。