JSFiddle - React, Tailwind, and code Playground

HTML

<select id="parent_task" name="parent_task" class="form-control input-large">
    <option value="">Please select</option>
    <option data-task-hours="100" data-parent="0" data-task-category="2444" value="527"> - Requirement Analysis</option>
    <option data-task-hours="100" data-parent="0" data-task-category="2391" value="531"> - Development </option>
    <option data-task-hours="0" data-parent="0" data-task-category="2395" value="535"> - Miscellaneous </option>
</select>

<select id="task_category" name="task_category">
   <option value="">Please select</option>
   <option value="2444">Bug Fixing &amp; Sustenance</option>
   <option value="2391">Configuration Management</option>
   <option value="2395">Database</option>
</select>

JavaScript

jQuery(document).ready(function($){
        $('#parent_task').on('change', function(event) {
            if ($(this).val() === "527") {
                var taskCategory = $(this).find(':selected').data('task-category');
                $("#task_category").val(taskCategory).prop('disabled', 'disabled');
            } else {
                $("#task_category").prop('disabled', false);
            }
        });
    });