JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<p><button onclick="disableOK()">Disable all except 1 - OK</button> All valid indexes passed in: 0,2,3,4:  <pre>$('#tabs').tabs('option', 'disabled', [0,2,3,4]);</pre></p>
<hr>
<p><button onclick="disableBad()">Disable all except 1 - Bad</button> An extra index (5) that doesn't correlate any tab is passed in: 0,2,3,4,5:<pre>$('#tabs').tabs('option', 'disabled', [0,2,3,4,5]);</pre>Result: all tabs are disabled, including index 1</p>
<hr>
<p><button onclick="enableAll()">Enable All</button> Restore to all enabled</p>


<div id="tabs">
  <ul>
    <li><a href="#tabs1">one</a></li>
    <li><a href="#tabs2">two</a></li>
    <li><a href="#tabs3">three</a></li>
    <li><a href="#tabs4">four</a></li>
    <li><a href="#tabs5">five</a></li>
  </ul>
    
  <div id="tabs1" style="display: none;"><p>tab 1 content</p></div>
  <div id="tabs2" style="display: none;"><p>tab 2 content</p></div>
  <div id="tabs3" style="display: none;"><p>tab 3 content</p></div>
  <div id="tabs4" style="display: none;"><p>tab 4 content</p></div>
  <div id="tabs5" style="display: none;"><p>tab 5 content</p></div>
</div>

<script>
    function disableOK(){
        $('#tabs').tabs('option', 'disabled', [0,2,3,4]);
        $('#tabs').tabs('option', 'active', 1);
    }

    function disableBad(){
        // added an extra index, 5.  it disables all, including 1
        $('#tabs').tabs('option', 'disabled', [0,2,3,4,5]);
        $('#tabs').tabs('option', 'active', 1);
    }
    
    function enableAll(){
        $('#tabs').tabs('option', 'disabled', []);
    }
    
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>