简单的方法

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

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

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

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

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

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

将输入字段和其他内容包装到<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'属性(因为它在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>

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

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