[英]how can I disable everything inside a form using javascript/jquery?
I have a form that pop up inside a layer, and I need to make everything inside that form read only regarding what type of input it is.我有一个在图层内弹出的表单,我需要将该表单中的所有内容设为只读,仅了解它是什么类型的输入。 Anyway to do so?
无论如何要这样做?
This is quite simple in plain JavaScript and will work efficiently in all browsers that support read-only form inputs (which is pretty much all browsers released in the last decade):这在纯 JavaScript 中非常简单,并且可以在所有支持只读表单输入的浏览器中高效工作(这几乎是过去十年发布的所有浏览器):
var form = document.getElementById("your_form_id");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].readOnly = true;
}
You can use the :input
selector, and do this:您可以使用
:input
选择器,并执行以下操作:
$("#myForm :input").prop('readonly', true);
:input
selects all <input>
, <select>
, <textarea>
and <button>
elements. :input
选择所有<input>
、 <select>
、 <textarea>
和<button>
元素。 Also the attribute is readonly
, if you use disabled
to the elements they won't be posted to the server, so choose which property you want based on that.该属性也是
readonly
,如果您对元素使用disabled
,它们将不会发布到服务器,因此请根据该属性选择您想要的属性。
With HTML5 it's possible to disable all inputs contained using the <fieldset disabled />
attribute.使用 HTML5,可以禁用使用
<fieldset disabled />
属性包含的所有输入。
disabled:
禁用:
If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, ie, not editable.
如果设置了此布尔属性,则作为其后代的表单控件(除了其第一个可选元素的后代)将被禁用,即不可编辑。 They won't received any browsing events, like mouse clicks or focus-related ones.
他们不会收到任何浏览事件,例如鼠标点击或与焦点相关的事件。 Often browsers display such controls as gray.
浏览器通常将此类控件显示为灰色。
Reference: MDC: fieldset参考: MDC:字段集
Its Pure Javascript :它的纯 Javascript :
var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
fields[i].disabled = true;
}
You can do this the easiest way by using jQuery.您可以使用 jQuery 以最简单的方式执行此操作。 It will do this for all input, select and textarea elements (even if there are more than one in numbers of these types).
它将为所有 input、select 和 textarea 元素执行此操作(即使这些类型的数量不止一个)。
$("input, select, option, textarea", "#formid").prop('disabled',true);
or you can do this as well but this will disable all elements (only those elements on which it can be applied).或者您也可以这样做,但这将禁用所有元素(仅那些可以应用它的元素)。
$("*", "#formid").prop('disabled',true);
disabled property can applies to following elements: disabled 属性可以应用于以下元素:
But its upto you that what do you prefer to use.但是,您更喜欢使用什么取决于您。
Old question, but right now you can do it easily in pure javascript with an array method :老问题,但现在您可以使用数组方法在纯 javascript 中轻松完成:
form = document.querySelector('form-selector');
Array.from(form.elements).forEach(formElement => formElement.disabled = true);
1) form.elements
returns a collection with all the form controls (inputs, buttons, fieldsets, etc.) as an HTMLFormControlsCollection. 1)
form.elements
返回一个包含所有表单控件(输入、按钮、 form.elements
集等)的集合作为 HTMLFormControlsCollection。
2) Array.from()
turns the collection into an array object. 2)
Array.from()
将集合变成数组对象。
3) This allows us to use the array.forEach()
method to iterate through all the items in the array... 3) 这允许我们使用
array.forEach()
方法遍历数组中的所有项...
4) ...and disable them with formElement.disabled = true
. 4) ...并使用
formElement.disabled = true
禁用它们。
$("#formid input, #formid select").attr('disabled',true);
或使其只读:
$("#formid input, #formid select").attr('readonly',true);
Old question, but nobody mentioned using css:老问题,但没有人提到使用 css:
pointer-events: none;
Whole form becomes immune from click but also hovers .整个表单不受点击影响,但也会悬停。
Here is another example pure JavaScript example that I used.这是我使用的另一个纯 JavaScript 示例。 Works fine without Array.from() as a NodeList has it's own forEach method.
在没有 Array.from() 的情况下工作正常,因为 NodeList 有它自己的 forEach方法。
document.querySelectorAll('#formID input, #formID select, #formID button, #formID textarea').forEach(elem => elem.disabled = true);
// get the reference to your form
// you may need to modify the following block of code, if you are not using ASP.NET forms
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
// this code disables all form elements
var elements = theForm.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
This one has never failed me and I did not see this approach on the other answers.这个从来没有让我失望,我没有在其他答案中看到这种方法。
//disable inputs $.each($("#yourForm").find("input, button, textarea, select"), function(index, value) { $(value).prop("disabled",true); });
disable the form by setting an attribute on it that disables interaction generally通过在其上设置通常禁用交互的属性来禁用表单
<style>form[busy]{pointer-events:none;}</style>
<form>....</form>
<script>
function submitting(event){
event.preventDefault();
const form = this; // or event.target;
// just in case...
if(form.hasAttribute('busy')) return;
// possibly do validation, etc... then disable if all good
form.setAttribute('busy','');
return fetch('/api/TODO', {/*TODO*/})
.then(result=>{ 'TODO show success' return result; })
.catch(error=>{ 'TODO show error info' return Promise.reject(error); })
.finally(()=>{
form.removeAttribute('busy');
})
;
}
Array.from(document.querySelectorAll('form')).forEach(form=>form.addEventListener('submit',submitting);
</script>
Javascript : Disable all form fields : Javascript:禁用所有表单字段:
function disabledForm(){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = true;
}
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].disabled = true;
}
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
To Enabled all fields of form see below code要启用表单的所有字段,请参阅下面的代码
function enableForm(){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = false;
}
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].disabled = false;
}
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = false;
}
}
for what it is worth, knowing that this post is VERY old... This is NOT a read-only approach, but works for me.对于它的价值,知道这篇文章很旧......这不是一种只读方法,但对我有用。 I use form.hidden = true.
我使用 form.hidden = true。
Thanks Tim,谢谢蒂姆,
That was really helpful.那真的很有帮助。 I have done a little tweaking when we have controls and we handle a event on them.
当我们有控件并处理它们的事件时,我做了一些调整。
var form = document.getElementById("form");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].setAttribute("onmousedown", "");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.