JSFiddle - React, Tailwind, and code Playground

by Paul Larson

HTML

<input type="hidden" name="OverRideRecureDay" id="overriderecureday" value="Y" disabled="disabled">
<input type="hidden" name="RID" id="rid" value="your_RID#" disabled="disabled">
<input type="hidden" name="recur_times" id="recur_times" value="your_recur_times" disabled="disabled">
<div id="giftfrequency">
    <div id="giftfrequencylabel" class="editor-label2">Gift Frequency:</div>
    <div class="editor-radio">
        <input type="radio" id="onetimedonation" name="override_recur" value="" checked="checked"></input> <span>Single Gift</span>

    </div>
    <div class="editor-radio">
        <input type="radio" id="recurringdonation" name="override_recur" value="Y"></input> <span>Monthly (Recurring) Gift</span>

    </div>
</div>

JavaScript

var MonthlyGift = document.getElementById("recurringdonation");
  var OneTimeGift = document.getElementById("onetimedonation");
  var OvrRecurDay = document.getElementById("overriderecureday");
  var RecurTimes = document.getElementById("recur_times");
  var RID = document.getElementById("rid");

  function EnableRecurring() {
      MonthlyGift.setAttribute("disabled", "");
      OvrRecurDay.setAttribute("disabled", "");
      RecurTimes.setAttribute("disabled", "");
  };

  function DisableRecurring() {
      RID.setAttribute("disabled", "disabled");
      OvrRecurDay.setAttribute("disabled", "disabled");
      RecurTimes.setAttribute("disabled", "disabled");
  };
  document.getElementById("recurringdonation").addEventListener("click", EnableRecurring);
  document.getElementById("onetimedonation").addEventListener("click", DisableRecurring);