JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="modal hide fade">
    <div class="modal-body">
        <ul class="nav nav-tabs">
            <li class='active'><a name='tab-1' href="#tab-1" data-toggle="tab">Tab 1</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="tab-1">
                <select name='example'></select>
                <div name='displayWrapper'>
                    <div name='display'>Nothing</div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" name='select' type="button"
        data-select-text='Select Button'>Test Button</button>
    </div>
</div>

JavaScript

$('a[name="tab-1"]').on('shown', function (e) {
    alert('shown')
    $add_button = $(this).closest('.modal').find('.modal-footer').find("button[name=select]").first()
    $add_button.button('select')
    $add_button.attr('disabled', 'disabled')
    $add_button.addClass('disabled')
});
$('.modal').modal();
$('a[name="tab-1"]').tab('show');