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?

回答1:

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):

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

回答2:

You can use the :input selector, and do this:

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

:input selects all <input>, <select>, <textarea> and <button> elements. 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.

回答3:

With HTML5 it's possible to disable all inputs contained using the <fieldset disabled /> attribute.

disabled:

If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., 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

回答4:

Its Pure Javascript :

var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
    fields[i].disabled = true;
}

回答5:

You can do this the easiest way by using 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, 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:

button
fieldset
input
optgroup
option
select
textarea

But its upto you that what do you prefer to use.

回答6:

$("#formid input, #formid select").attr('disabled',true);

or to make it read-only:

$("#formid input, #formid select").attr('readonly',true);

回答7:

Old question, but nobody mentioned using css:

pointer-events: none;

Whole form becomes immune from click but also hovers.

回答8:

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

回答9:

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

回答10:

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", "");
                }

来源：https://stackoverflow.com/questions/3386954/how-can-i-disable-everything-inside-a-form-using-javascript-jquery

标签

javascript

jquery

readonly