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

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

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

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

当前回答

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

2010-08-18 03:44:27

其他回答

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

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

和风格:

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

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

2019-06-07 08:44:12

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

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;
}

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

2020-05-13 10:04:55

我宁愿使用jQuery:

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

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

2015-09-25 13:26:16

简单的方法

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

2018-09-11 14:06:59

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

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

点击这里查看工作演示

注意，它使用jQuery。

2010-08-18 00:30:07

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

推荐文章

最新文章

标签