updating class using jquery

Question

In the following html, jquery, bootstrap code,

addMenuBar : function addNavigation (component) {
    var html = '<ul class="nav nav-pills nav-justified" role="tablist">';
    html += '<li id ="scenario" class="disabled"><a href="#">Scenario</a></li>';
    html += '<li id ="resolutions" class="disabled"><a href="#">Resolutions</a></li>';
    html += '<li id ="triggers" class="disabled"><a href="#">Triggers</a></li>';
    html += '</ul>';
    component.append(html);
    $('ul[id="scenario"] li').addClass("active");
}

where the component is a container div as follows:

    this.container = $(document.createElement('div'));
    this.container.addClass('patient-hover-inner');
    this.container.appendTo(this.form);

I want to change the class for the 'li' item for id = 'scenario' from 'disabled' to 'active'. how do i do this? The above won't work without any errors

Answer 1

Use switchClass()

$('li.disabled').switchClass("disabled", "active");

If you are not using jQuery UI, you can do

$('li.disabled').each(function(){
    $(this).removeClass('disabled');
    $(this).addClass('active');
});

Answer 2

$('ul[id="scenario"] li').addClass("active");

can be

$('ul li#scenario').removeClass("disabled").addClass("active");

If a li has the disabled class it will be removed. If it doesn't then nothing happens. In either case the 'active' class will be added.