jquery cookies and Legend state

Question

I'm using this code to activate disactivate the contents of fieldsets and jquery cookies plugin which works except for the state of the legend which always comes back as unselected which in turn sets the elements inside the fieldset to disabled.

function activeLegend(){                                                                               
  var legendId=this.id
  var fsId=$(this).closest('fieldset').prop('id')
  var inputs=$('#'+fsId).find(':input')

  inputs.each(function(){
    if ($(this).is(':disabled')){
        $('#'+legendId).css('background-color', '#6b0000');
        $('#'+fsId+' :input').prop('disabled', false);
        $('#'+fsId+' input:checkbox').button('enable');
        $('#'+fsId+' input:radio').button('enable');
        return false;
    }else{
        $('#'+legendId).css('background-color', '#b20000');
        $('#'+fsId+' :input').prop('disabled', true);
        $('#'+fsId+' input:checkbox').button('disable');
        $('#'+fsId+' input:radio').button('disable');   
        return false;
    };
  }); 
};

How can I set a cookie to remember the state of the Legend?

EDIT:

I'm close, I'm able to get the Legend 'state' by checking for it's background color... but I can't set the cookie to remember the color so it always reverts back to it's original state... what am I doing wrong?

$(function(){                                                                                       
    var legend=$('.setCookies').find('.activeLegend');

    legend.each(function(){
        $(this).css('background-color', $.cookie(this.id));
    });

    legend.click(function(){
        var fsId=$(this).closest('fieldset').prop('id')
        var legendId=this.id

        if ($('#'+legendId).css('background-color')=='rgb(178, 0, 0)'){
            $('#'+legendId).css('background-color', '#6b0000');
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
            $.removeCookie(this.id);
        }else{
            $('#'+legendId).css('background-color', '#b20000');
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
            $.cookie(this.id, {expires: 365});
        }
    });
});

score 1 · Answer 1 · answered Jul 08 '15 at 00:41

1

I'm not sure where do you want to set the legend state, but you can do this:

inputs.each(function(){
    var element = $(this);
    var id = element .attr('id');
    $.cookie(id, element.text());
    if ($(this).is(':disabled')){
        $('#'+legendId).css('background-color', '#6b0000');
        $('#'+fsId+' :input').prop('disabled', false);
        $('#'+fsId+' input:checkbox').button('enable');
        $('#'+fsId+' input:radio').button('enable');
        return false;
   }else{
       $('#'+legendId).css('background-color', '#b20000');
       $('#'+fsId+' :input').prop('disabled', true);
       $('#'+fsId+' input:checkbox').button('disable');
       $('#'+fsId+' input:radio').button('disable');   
       return false;
   }
 });

answered Jul 08 '15 at 00:41

John Diaz

341
3
13

I tried your code and no luck and this is how I call the function 'onclick='activeLegend.call(this);'' The way I set the legend "state" as you see in the code is I change the background color as to get a visual confirmation other then the elements being enabled. So really just by clicking the legend it checks if the fieldset elements are enabled or disabled. – JoMojo Jul 08 '15 at 20:36
looking at your code I'm trying to combine the cookie and the state change but I can't quite get it to work... I added the new code, any ideas where I'm going wrong? – JoMojo Jul 09 '15 at 17:14

score 0 · Accepted Answer · answered Jul 09 '15 at 23:20

After a beer break or two I finally figured it out. I combined the click() function with setting cookies.

$(function(){                                                                                       
    var legend=$('.setCookies').find('.activeLegend');

    legend.each(function(){
        var legendId=this.id;
        var fsId=$('#'+legendId).closest('fieldset').prop('id');

        $(this).css('background-color', $.cookie(legendId));
        if ($('#'+legendId).css('background-color')=='rgb(178, 0, 0)'){
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
        }else{
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
        };

    });

    legend.click(function(){
        var fsId=$(this).closest('fieldset').prop('id');
        var legendId=this.id;

        if ($('#'+legendId).css('background-color')=='rgb(107, 0, 0)'){
            $('#'+legendId).css('background-color', '#b20000');
            $('#'+fsId+' :input').prop('disabled', false);
            $('#'+fsId+' input:checkbox').button('enable');
            $('#'+fsId+' input:radio').button('enable');
        }else{
            $('#'+legendId).css('background-color', '#6b0000');
            $('#'+fsId+' :input').prop('disabled', true);
            $('#'+fsId+' input:checkbox').button('disable');
            $('#'+fsId+' input:radio').button('disable');
        };
        $.cookie(legendId, $(this).css('background-color'), {expires: 365});
    });
});

jquery cookies and Legend state

2 Answers2