Question

I have a checkbox next to an input text box. If the checkbox is checked the text box is emptied and disabled. However, I would like to store the value previously in that text box so it will be returned to the text box if the user decides to uncheck the checkbox. Here is my code:

function disablePath() {
    var currentPath;
    $('#user_strategy').on('change','input[value="all"]', function(){
        var that = $(this);
        if($(this).is(':checked')) {
            currentPath = that.next().val();
            that.next().attr("disabled", "disabled").val('');
        }
        else {
            that.next().removeAttr("disabled").val(currentPath);
        }
    });
}

So that works perfectly fine if I only have one checkbox followed by a text box. I run into trouble if I have more than one checkbox-textbox combination, which I do. If I check more than one checkbox, only the last textbox contents is stored – so if I uncheck any of the previously checked boxes then corresponding textbox will get populated with the value of the last textbox whos related checkbox got checked, regardless of relation. Is there a way to store the value of the textbox specific to the previous checkbox? Here is the live code:

http://kaboukie.net/stackoverflow/

I believe I need to use eventData but am uncertain how, any assistance would be greatly appreciated!

Answer 1

I would recommend attaching data to the element itself which can be done using Jquery’s .data() method.

Here is the code, that I have already tested to work properly 😉

$(function() {
    function disablePath() {
        var currentPath;
        $('#user_strategy').on('change','input[value="all"]', function(){
            var that = $(this);
            if($(this).is(':checked')) {
                temp= that.next().val();
                that.data("currentPath" , temp);
                that.next().attr("disabled", "disabled").val('');
            }
            else {
                that.next().removeAttr("disabled").val(that.data("currentPath"));
            }
        });
    }
    disablePath();
});