JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

Options:
<input type='radio' class='amt' name='amt' value='500' checked='checked' /> $5
<input type='radio' class='amt' name='amt' value='1000' /> $10
<input type='radio' class='amt' name='amt' value='2000' /> $20
<input type='radio' class='amt' name='amt' value='' /> Other
<br />
Amount: 
<input id='amount' name='amount' value='500' type='hidden' />
<input id='amountShown' value='5' type='text' disabled='disabled' />

JavaScript

(function($){
    $(document).ready(function(){
        $('.amt').change(function(){
            var cents = $(this).val();
            if(cents!=''){
                $('#amount').val(cents);
                var dollars = cents/100;
                $('#amountShown').val(dollars);
                $('#amountShown').attr('disabled', 'disabled');
            } else {
                $('#amountShown').removeAttr('disabled');
            }
        });
        
        $('#amountShown').blur(function(){
            var dollars = $(this).val();
            var cents = parseInt(dollars*100);
            $('#amount').val(cents);
        });
    });
})(jQuery);