Jquery pass and store a dynamic variable on event trigger

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!

Sohaib Shaheen · Accepted Answer · 2012-07-24 23:46:17Z

2

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();
});

answered Jul 24, 2012 at 23:46

Sohaib Shaheen

3371 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ole Melhus · Accepted Answer · 2012-07-24 23:43:55Z

0

How about storing the data as an attribute on the checkbox?

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

http://jsfiddle.net/ruwJT/

Might not be best practice, but it works.

answered Jul 24, 2012 at 23:43

Ole Melhus

1,94912 silver badges17 bronze badges

Comments

Derek Hunziker · Accepted Answer · 2012-07-24 23:46:59Z

0

The problem is that when you set currentPath, it does not remember which element was responsible.

To get around this, you can assign a unique ID attribute to each checkbox, and store that ID as a key along with the textbox's value in a key-value-pair.

Alternatively, can use jQuery's .data() method to store abritraty data on any element. See http://jsfiddle.net/EP5bg/

answered Jul 24, 2012 at 23:46

Derek Hunziker

13.2k4 gold badges61 silver badges108 bronze badges

Collectives™ on Stack Overflow

Jquery pass and store a dynamic variable on event trigger

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related