如何使整个HTML表单“只读”？
如何使整个HTML表单“只读”？
提问于 2010-08-18 08:08:34
我有两个带有HTML表单的页面。第一个页面有一个提交表单，第二个页面有一个确认表单。第一个表单提供了许多控件的选择，而第二个页面再次显示提交表单中的数据，并显示一条确认消息。在第二个表单中，所有字段都必须是静态的。
在我看来，一些表单控件可以是readonly，所有的表单控件都可以是disabled，不同之处在于您仍然可以使用Tab键切换到只读字段。
有没有办法将整个表单标记为只读/禁用/静态，这样用户就不能更改任何控件？
回答 13
Stack Overflow用户
回答已采纳
发布于 2013-06-19 16:24:18
将输入字段和其他内容包装到<fieldset>中，并为其提供disabled="disabled"属性。
示例(http://jsfiddle.net/7qGHN/)：
<form>
<fieldset disabled="disabled">
<input type="text" name="something" placeholder="enter some text" />
<select>
<option value="0" disabled="disabled" selected="selected">select somethihng</option>
<option value="1">woot</option>
<option value="2">is</option>
<option value="3">this</option>
</select>
</fieldset>
</form>
Stack Overflow用户
发布于 2014-03-24 19:45:51
并非所有表单元素都可以设置为readonly，例如：
- 复选框
- 单选框
- file upload upload
那么合理的解决方案应该是将所有表单元素的disabled属性设置为true，因为OP没有说明应该将特定的“锁定”表单发送到服务器( disabled属性不允许这样做)。
下面演示中展示的另一个解决方案是在form元素上放置一个层，这将防止与form元素内的所有元素进行任何交互，因为该层设置了更大的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>
Stack Overflow用户
发布于 2010-08-18 08:30:08
您可以使用此函数禁用表单：
function disableForm(formID){
$('#' + formID).children(':input').attr('disabled', 'disabled');
}See the working demo here
请注意，它使用jQuery。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3507958
复制相关文章
相似问题
腾讯云开发者
