Question

I have the following HTML:

<div class="button accessLink" id="loginLink" data-action="Login" 
data-dialog="access" data-disabled="no" data-entity="n/a" 
data-href="/User/Access/Login" title="Login" 
style="-webkit-user-select: none;" data-title="Login">Login</div>

I have some code and when I step through the debugger I see the following get
executed with $(targetSelector) set to #loginLink.

$(targetSelector).attr('data-disabled', 'yes');

When I check again with the chrome developer tools then I see:

<div class="button accessLink" id="loginLink" data-action="Login" 
data-dialog="access" data-disabled="no" data-entity="n/a" 
data-href="/User/Access/Login" title="Login" 
style="-webkit-user-select: none;" data-title="Login">Login</div>

Can someone explain why data-disabled does not seem to change?

Answer 1

Your debugger might not be refreshing changed values or you might be missing something, you need to print them to see the change e.g using alert. You statement seems correct and is changing the attribute.

Live Demo

$('#loginLink').attr('data-disabled', 'yes');    
alert($('#loginLink').attr('data-disabled'));

You are try​ing to change data attribute and jQuery gives you data() function to set and get the data attributes so you would using data() instead of attr().

Live Demo

$('#loginLink').data('disabled', 'yes');
alert($('#loginLink').data('disabled'));