Refresh "aria-pressed" of UI Buttons with Markup / Style

Aline Matos picture Aline Matos · Apr 12, 2011 · Viewed 11.6k times · Source

I'm using the UI buttons with style - Like | B | I | U | in this example page, and the html structure generated look like this:

<div class="radiocheck ui-buttonset">
<input type="radio" name="radio1" value="1" id="radio0" class="ui-helper-hidden-accessible">
<label for="radio0" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false">
    <span class="ui-button-text">Sobre</span>
</label>
<input type="radio" name="radio1" value="2" id="radio1" class="ui-helper-hidden-accessible">
<label for="radio1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">Politica</span>
</label>
<input type="radio" name="radio1" value="3" id="radio2" class="ui-helper-hidden-accessible">
<label for="radio2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">Outros</span>
</label>
<input type="radio" name="radio1" value="4" id="radio3" class="ui-helper-hidden-accessible">
<label for="radio3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false">
    <span class="ui-button-text">Promocoes</span>
</label>

When I change the "aria-pressed" propertie to "true", the button doesn't change at all... I tryed this way, but it didn't work:

var myhappyidtest = 2;

$('.radiocheck input').each(function(i){ if(myhappyidtest == $(this).val()){ $(this).next('label').attr('aria-pressed', 'true'); } });

I saw that in button cases, it's possible to refresh. But I don't have idea on how to do this in this case with label.

Someone have an idea?

Answer

Aline Matos picture Aline Matos · Apr 14, 2011

I just add the "ui-state-active" class to the element and it works!

var myhappyidtest = 2;

$('.radiocheck input').each(function(i){
    if(myhappyidtest == $(this).val()){
        $(this).next('label').attr('aria-pressed', 'true');
        $(this).next('label').addClass('ui-state-active');
    }else{
        $(this).next('label').attr('aria-pressed', 'false');
        $(this).next('label').removeClass('ui-state-active');
    }
});

UPDATE

As suggested by @Gnought and @Vladimir, and using the approach of @Vladimir, here's an updated answer to this question:

var myhappyidtest = 2;

$('#format input[value="' + myhappyidtest + '"]').attr('checked', true).button('refresh');

As the original link of the example is off, I've made an example here: http://jsfiddle.net/psycocandy/8SpGd/1/

Thank you for the suggestions.