JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id="form1" method="post">
    <div>
        <input type="radio" id="rb1" name="rb" value="1" checked="checked" /><label for="rb1">Disable</label>
    </div>
    <div>
        <input type="radio" id="rb2" name="rb" value="2" /><label for="rb2">Enable</label>
    </div>
    <div>
        <input type="text" class="txt" id="tb1" disabled="disabled" />
    </div>
    <div>
        <input type="text" class="txt" id="tb2" disabled="disabled" />
    </div>
    <div>
        <input type="submit" id="buttonSubmit" name="buttonSubmit" value="Submit" />
    </div>
</form>

CSS

input[type='text'] {
    margin: 10px 0px 0px 30px;
}

JavaScript

$(document).ready(function() {
    $('#form1').validate();
    
    $('input:radio').change(function() {
        if ($(this).val() == '1') {
            $('#tb1, #tb2').removeClass('required');
            $('#tb1, #tb2').attr('disabled', 'disabled');
        } else if ($(this).val() == '2') {
            $('#tb1, #tb2').addClass('required');
            $('#tb1, #tb2').removeAttr('disabled');
        }
    });
});