How to simply a .attr("disabled..) for a total of 8 buttons in jQuery?

I've 8 different <form>s in a same page that the user can only edit one, save or cancel, edit another, save or cancel, etc. I've a lot of repetitive code because and some problems to handle it. For example, for the first form:

/* When the button EDIT is clicked */
$("#project_title_edit").click(function(){
    $("#ajax-loader").fadeIn('normal');

    // @todo disable all the other project_XXX_edit

    $(this).fadeOut();

    $("div#project_title").slideUp("600");

    $("div#project_title_form").delay("500").slideDown("600");

    window.onbeforeunload = function() {
        return '';
    };

    $("#ajax-loader").fadeOut('normal');

    return false;    
});

/* When the button cancel, that appears inside the from, is clicked */
$("#project_title_cancel").click(function(){
    $("#ajax-loader").fadeIn('normal');

    // @todo enable all the other project_XXX_edit

    window.onbeforeunload = null;    

    $("#project_title_edit").fadeIn();

    $("div#project_title_form").slideUp("600");

    $("div#project_title").delay("500").slideDown("600");

    $("#ajax-loader").fadeOut('normal');

    return false;
});

This is the pattern that I've for all the forms, and a lot of repetitive code: the above x 8 times. I want to know if this can be simplified like if I've, for example:

• project_importance (project_importance_edit, project_importance_cancel, project_importance_form)
• project_description (project_description_edit, project_description_cancel, project_description_form)

And the other thing I n开发者_运维百科eed is how to disable ALL the xxx_edit buttons and re-enable it.

Thank you in advance!

Give the buttons a class and bind your function to the click event of the class. Something like

$('.edit').click(function() {
     //edit code goes here
});


$('.cancel').click(functon() {
    //Cancel code goes here
});

You can remove the -edit and add form e.g.

var form = $(this).id.replace('edit', '')+'form'