How to disable click event on JQuery tabs?

Question

I have these simple tabs:

<div class="ftabs">                    

<ul id="tabs" class="tabs nav nav-tabs nav-justified" data-tabs="tabs">
    <li  id='an'><a href="#anag" data-toggle="tab"><h3>Dati Anagrafici</h3></a></li>
    <li id='ind'><a href="#indirizzi"  data-toggle="tab"><h3>Indirizzi</h3></a></li>
    <li id='ref'><a href="#referenti" data-toggle="tab"><h3>Referenti</h3></a></li>
    <li id='ban'><a href="#blue" data-toggle="tab"><h3>Banche</h3></a></li>
</ul>

I can open the tab that I want with jQuery, for example:

$("#ref a[href='#referenti']").tab('show');

but I would like to disable the first 2 tabs. I've tried it this way, but it doesn't work:

$('#tabs').tabs('option', 'disabled', [0, 1]);

Why? How can I do this?

Solution

You cannot disable the active tab, so need to set the 3rd tab as active then disable the first two

From Docs:

The selected tab cannot be disabled.

So

jQuery(function ($) {
    $("#tabs").tabs({
        active: 2,
        disabled: [0, 1]
    });
});

Demo: Fiddle

To disable the tabs programatically later

$("#tabs").tabs("option", "active", 2)
$("#tabs").tabs("option", "disabled", [0, 1]);

Demo: Fiddle