disabling form element

I want a button to be disabled when it is clicked. Here is my code:

var disable = function(form_name,btn_name) {
    document.form_name.btn_name.disabled = true;
}

This is how disable() is called:

<form name = 'form1'>
     <input name = 'btn1' type = 'button' d开发者_运维技巧isabled = false onclick = 'disable("form1","btn1")' />
</form>

This code does not work. Does anyone know why?

Because

document.form_name.btn_name.disabled = true;

is the same as doing

document['form_name']['btn_name'].disabled = true;

You need to do

document[form_name][btn_name].disabled = true;

You can't use the dot notation with variable name, You should use the array notation:

var disable = function(form_name,btn_name) {
    document[form_name][btn_name]["disabled"] = true;
}

How about just:

 onclick = 'this.disabled = true;'

You can just do

<form name='form1'>
     <input name='btn1' type='button' disabled='false' onclick='this.disabled = true' />
</form>