I have the following code to disable a submit button when the form is submitted:
$('#myform').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
Is there a more concise syntax for this?
4 Answers
$('input').disable(); //disables
$('input').enable(); //enables
$('input').toggleDisabled(); //toggles
$('input').toggleEnabled(); //toggles
$('input').toggleDisabled(true); //disables
$('input').toggleEnabled(true); //enables
Or, if you don't want a plugin, you can use this:
jQuery.fn.disable = function() {
$( this ).prop( "disabled", true );
};
$('input[type=submit]', this).disable();
7 Comments
Shef
A plugin for this trivial task? Common. :)
Shef
You should use
.prop() for setting the disabled attribute on jQuery > 1.6, not .attr().
arezzo
Your non-plugin solution is perfect. Thanks.
arezzo
@Shef: Why do you say "should"? Both
prop and attr work equally well.Shef
@arezzo I am not the one who says so, the docs do. Just because something works now, doesn't mean it won't be deprecated in the future.
|
Well, I'd give it an ID, first of all, otherwise you'll disable every submit button, which may or may not be what you intend.
Other than that, that's about it unless you want to use the disable plugin.
Comments
$('#myform').submit(function(){
$('input[type=submit]', this).prop('disabled', true);
});
It can't get more concise than this. It is clean enough. I changed $.attr() with $.prop(), because this is what you should use to set and get values, which change the state of an element, but not the attribute itself.
From the docs:
The
.prop()method should be used to set disabled and checked instead of the.attr()method.
2 Comments
arezzo
Ok. I just read the docs you linked to. How do you know if you're dealing with a property or an attribute. None of the examples mentioned on the docs include
disabled. Are you sure it's not an attribute?Shef
@arezzo Yes, they do. I am quoting you from the docs. It's easy to hit CTRL+S to find where the text was quoted from.
One cleaner version can be this:
$(this).find(':submit').attr('disabled', true);
also
$(this).find(':submit').prop('disabled', true);
disabled()function of some kind.$('input[type=submit]', this).prop('disabled', true);is clear enough I think. :)prop()instead ofattr()?