jQuery removeAttr('type') doesn't work

Question

My problem is very simple

$('#button').removeAttr('type');

triggers an error on firebug

type property can't be changed

I have 2 questions:

• How to get around this?
• Is there a reference with a list of properties that can't be changed?

Thanks

EDIT

What I want to do is:

Prevent the button from submitting the form.

Note: my button is included as a html template, the form code is not accessible form me.
Something like:

include 'form.php';
include 'buttons.php';

where I have control only on buttons.php

Answer 1

You can't change an input's type in IE (<9?) after it has been inserted into the DOM. jQuery raises an error for all browsers because of this.

From source:

    set: function( elem, value ) {
            // We can't allow the type property to be changed (since it causes problems in IE)
            if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
                jQuery.error( "type property can't be changed" );

There are no other cases I know about (or jQuery knows about) and how to get around this depends a lot on what you are trying to do in the first place. Consider creating a new element with different type and using that for example.

Edit: To prevent the button from submitting a form, you can use:

$("#button").click(function(e){
    e.preventDefault();
});

Or (credit Tim Down):

$("#button").prop("disabled", true);

---

To prevent form from being submitted through any means, you can use:

$("#form").submit(function(e){
    e.preventDefault();
});