Overriding a prototype.js method

Question

I'm attempting to override the Form.Element.disable() method in PrototypeJS so that it adds a custom class to disabled form elements.

I've added:

Form.Element.disable = function(element) {
element = $(element);
element.blur();
element.disabled = true;
element.addClassName("disabled");
return element;}

to the page after loading prototype.js - this works if called directly eg

Form.Element.disable("myInputBox");

But the original PrototypeJS method is used if I call

$("myInputBox").disable();

I know it's something to do with the "scope" in which I'm defining it - I'm effectively creating a new instance of the disable() method, but I have no idea how to shift the scope so that it replaces the original PrototypeJS version.

Where am I going wrong?

Answer 1

Form.Element.prototype.disable = function(element) { ... }

Answer 2

Form.Element.addMethods({
    disable: function(element) {
        // stuff here
    }
});

And if it doesn't work : http://api.prototypejs.org/dom/element.html#addmethods-class%5Fmethod

Element.addMethods(["input", "textarea", "select"], {
    disable: function(element) {
        // stuff here
    }
});