How to toggle data attribute with jQuery?

Question

I need to toggle between two possible values for a data attribute.

If data-state is equal to enabled then I want to change it to disabled and vice versa.

$('.sites .state').on('ajax:success', function(data, status, xhr) {
   var site = $(this).parents('article').first();

   if (site.data('state') == 'enabled') {
     site.attr('data-state', 'disabled');
   } else {
     site.attr('data-state', 'enabled');
   }
});

NOTE: I needed to change the DOM element and to my knowledge, I can't use data to do that (hence the use of attr).

@VisioN See my update. I needed to change the DOM element and to my knowledge, I can't use data to do that (hence the use of attr). — Shpigford
– Shpigford, Commented Jan 23, 2013 at 15:08

Arun P Johny · Accepted Answer · 2013-01-23 15:39:45Z

8

site.attr('data-state', 'disabled');

Should be

site.data('state', 'disabled');

When an element is created the data-<value> attribute can be used in initialize the data property, but after that you have to use the jQuery.data() method to fetch or modify the data.

While $(el).data('<data-name>') returns the value, $(el).data('<data-name>', value) set the data value.

Updated: Based on the updated requirement

$('div').attr('data-state', $('div').attr('data-state') == 'enabled' ? 'disabled' : 'enabled')

Fiddle

edited Jan 23, 2013 at 15:39

answered Jan 23, 2013 at 14:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Shpigford Over a year ago

I needed to change the DOM element and to my knowledge, I can't use data to do that (hence the use of attr).

Mark Pieszak - Trilon.io · Accepted Answer · 2013-01-23 16:45:50Z

4

Not really sure what the problem is, but since you are using .data() you might as well keep using it in your if/else. Doing .attr('data-state') saves it on the DOM element itself (visible when you inspect the element), while with .data('state') it is invisible, and also faster.

Also if you use the ternary operator you can make it into 1 small line:

site.attr('data-state', site.data('state') === 'enabled' 
    ? 'disabled' 
    : 'enabled');

edited Jan 23, 2013 at 16:45

answered Jan 23, 2013 at 14:55

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

1 Comment

Shpigford Over a year ago

I needed to change the DOM element and to my knowledge, I can't use data to do that (hence the use of attr).

Robin Maben · Accepted Answer · 2013-01-23 14:56:10Z

3

site.data('state', (site.data('state') == 'enabled' ? 'disabled' : 'enabled'))

answered Jan 23, 2013 at 14:56

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to toggle data attribute with jQuery?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related