Question

I wrote a code :

$('.Edit').live('click', function() {
    if ($(this).text().valueOf()=="Save"){
        alert('sauvegarder..');
        var id = $(this).attr("id");
        $(".d"+id).prop('enabled', false);
        $(".d"+id).css("background-color","#FFF");
        $(".d"+id).css("border-color","black");
        $(this).text('Save').button("refresh");
    } else if($(this).text().valueOf()=="Edit") {
        alert('editer..');
        var id = $(this).attr("id");
        $(".d"+id).prop('disabled', false);
        $(".d"+id).css("background-color","#FFF");
        $(".d"+id).css("border-color","red");
        $(this).text('Save').button("refresh");
    }
}

And it has this function : The button is normally on ‘Edit’ mode, when i click all the input element become enabled so i can write stuff in them and in the same time the button name change to ‘Save’. When i click on Save, the input become disabled and i cannot write in them anymore. But when i do this code, it makes all in the same time, so i’ve got two alerts and input stay enabled. I want somekind of toggle effect, i wanted to know if it’s possible.

Answer 1

$('.Edit').live('click', function() {
    var el = $(this);   
        var r = $(".d"+el.attr("id"));
        if (el.hasClass('editMode')){
        el.removeClass('editMode');
                alert('sauvegarder..');
        r.attr("disabled", "disabled").css({
                    "background-color":"#FFF",
                    "border-color":"black"
                });
        el.text('Save').button("refresh");
    } else {
        el.addClass('editMode');
                alert('editer..');
        r.removeAttr("disabled").css({
                    "background-color","#FFF",
                    "border-color","red"
                });
        el.text('Save').button("refresh");
    }
}