JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <script>
        function changeTextBox() {
            var val = $('#category').val();
            if (val === 'option1' || val === 'option2' || val === 'option3' || val === 'option4') {
                $('#subcategory').removeAttr("disabled");
            } else {
                $('#subcategory').prop('disabled', true);
            }
        }
    </script>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="category" class="col-sm-2 control-label">Category</label>
            <div class="col-sm-3">
                <select class="form-control" id="category" name="category" onChange="changeTextBox();">
                    <option value="select">--select--</option>
                    <option value="option1">Option1</option>
                    <option value="option2">Option2</option>
                    <option value="option3">Option3</option>
                    <option value="option4">Option4</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="sub" class="col-sm-2 control-label">Sub Category Type</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="subcategory" disabled>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-1">
                <button type="submit" class="btn btn-default">Add</button>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-default">Edit</button>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-default">Delete</button>
            </div>
        </div>
    </form>
</div>