JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="transfertype">Transfer type:</label>
<select name="transfertype" id="transfertype" required>
    <option value="">Select Type</option>
    <option value="Sale">Sale</option>
    <option value="Gift">Gift</option>
    <option value="Trade">Trade</option>
    <option value="Repossession">Repossession</option>
    <option value="Court Order">Court Order</option>
    <option value="Inheritance">Inheritance</option>
    <option value="Add Name">Add Name</option>
    <option value="Remove Name">Remove Name</option>
    <label for="purchaseprice" class="labelspace">Purchase price:</label>
    <input type="text" name="purchaseprice" id="purchaseprice" required="yes" />

JavaScript

$(document).on('change', '#transfertype', function () {

    var purchaseprice = $('#purchaseprice');

    if ($(this).val() === '' || $(this).val() === 'Sale') {
        purchaseprice.val('').prop('readOnly', false);

     
              $("#purchaseprice").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
    

    } else {
        purchaseprice.val($(this).val()).prop('readOnly', true);
        purchaseprice.valid();
    }
    calculateTotal();
});