JSFiddle - React, Tailwind, and code Playground

by bryiantan

HTML

<div class="error-message"></div>
    <form id="satisfaction" onsubmit="return validateInput();">
        <input type="radio" name="satisfied" value="yes" required /> Satisfied
        <input type="checkbox" id="donate" /> Donate<br />
        <input type="radio" name="satisfied" value="no" required /> Not satisfied
        <input type="text" id="reason" /> Reason<br />
        <input type="submit" value="Submit" id="btnSubmit" />
    </form>

JavaScript

function validateInput() {
            var reason = $('#reason').val();
            alert(reason);
            if (reason == '' || reason == null) {
                $('.error-message').text('RULE 1 FAILED');
                return false;
            }
            else {
                $('.error-message').text(''); 
                return true;
            }
        }

        $(document).ready(function () {
            $('#donate').attr('disabled', 'disabled');
            // $('#satisfied').on('change',function(){ 
            $('input[type=radio][name=satisfied]').change(function () {
                //if($('#satisfied:checked').length > 0){ 
                if (this.value == 'yes') {
                    $('#donate').removeAttr('disabled');
                }
            });
        });