JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<select class="form-control job-subcategory" autocomplete="off" name="job_subcategory">
    <option class="sub-catg-options" value="">Select Sub-Category(Optional)</option>
    <option class="electric-subcategory" value="Emergency Electricians">Emergency Electricians</option>
    <option class="electric-subcategory" value="Alarm Installer">Alarm Installer</option>
    <option class="electric-subcategory" value="Electrical Lighting">Electrical Lighting</option>
    <option class="electric-subcategory" value="Back Up Generators">Back Up Generators</option>
</select>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>

JavaScript

$('.job-subcategory').change(function () {
    if ($('.job-subcategory').val() == "Emergency Electricians") {
        $(':radio').prop('checked', false);
    }
    else if ($('.job-subcategory').val() == "Alarm Installer") {
        $(':radio').prop('checked', false);
    }
    else if ($('.job-subcategory').val() == "Electrical Lighting") {
        $(':radio').prop('checked', false);
    }
    else if ($('.job-subcategory').val() == "Back Up Generators") {
        $(':radio').prop('checked', false);
    }
    
    $('.btn-group').find('label').removeClass('active');
});