我有两页HTML表单。第一页有一个提交表单,第二页有一个确认表单。第一个表单提供了许多控件的选择,而第二个页面再次显示来自提交表单的数据,并显示确认消息。在第二种形式中,所有字段必须是静态的。
从我所看到的,一些表单控件可以是只读的,所有控件都可以被禁用,区别在于你仍然可以选择一个只读字段。
而不是按字段做这个是否有任何方法标记整个表单为只读/禁用/静态,这样用户就不能改变任何控件?
我有两页HTML表单。第一页有一个提交表单,第二页有一个确认表单。第一个表单提供了许多控件的选择,而第二个页面再次显示来自提交表单的数据,并显示确认消息。在第二种形式中,所有字段必须是静态的。
从我所看到的,一些表单控件可以是只读的,所有控件都可以被禁用,区别在于你仍然可以选择一个只读字段。
而不是按字段做这个是否有任何方法标记整个表单为只读/禁用/静态,这样用户就不能改变任何控件?
当前回答
所有浏览器都支持的另一种简单方式是:
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;
}
但是请注意,这种方法下的标签仍然有效,用户仍然可以操作带有焦点的元素。
其他回答
在确认页面上,不要将内容放在可编辑控件中,只需将它们写入页面。
简单的方法
$('#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');
你可以使用这个函数禁用表单:
function disableForm(formID){
$('#' + formID).children(':input').attr('disabled', 'disabled');
}
点击这里查看工作演示
注意,它使用jQuery。
将输入字段和其他内容包装到<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 " > < /选项> < /选择> < /自定义字段> > < /形式