我怎样才能使整个HTML表单“只读”?

我有两页HTML表单。第一页有一个提交表单，第二页有一个确认表单。第一个表单提供了许多控件的选择，而第二个页面再次显示来自提交表单的数据，并显示确认消息。在第二种形式中，所有字段必须是静态的。

从我所看到的，一些表单控件可以是只读的，所有控件都可以被禁用，区别在于你仍然可以选择一个只读字段。

而不是按字段做这个是否有任何方法标记整个表单为只读/禁用/静态，这样用户就不能改变任何控件?

当前回答

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

对于jQuery 1.6及以上版本:

// To fully disable elements
$('#myForm :input').prop('disabled', true);

// To make elements readonly
$('#myForm :input').prop('readonly', true);

jQuery 1.5及以下版本:

$('#myForm :input').prop('disabled', 'disabled');

And

$('#myForm :input').prop('readonly', 'readonly');

其他回答

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

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

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

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

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

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

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

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

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

和风格:

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

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

推荐文章