JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="yucho" value="Yucho"> ゆうちょ
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="UFJ" value="UFJ"> UFJ
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Mizuho" value="Mizuho"> みずほ
        </label>
    </div>
        <div class="form-check form-check-inline">
            <div class="input-group">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Other" value="Other">Other
                </label>

                <input type="text" class="form-control" id="unique" aria-label="Text input with radio button" disabled>
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-success">Add</button>
                    <button type="button" class="btn btn-success">Remove</button>
                </div>
            </div>
        </div>

JavaScript

$(document).ready(function() {
		
    var allOptions = $('input[name=inlineRadioOptions]')
    allOptions.click(function() {
    
        $("#unique").prop("disabled", false);
        allOptions.prop('disabled', true);
        
    });
});