JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<input type="radio" id="but1" name="vals" onclick="makeChoice()">
      <input type="radio" id="but2" name="vals" onclick="makeChoice()">
      <input type="text" id="box1" value="abcde">
      <input type="text" id="box2" value="pqrst">

CSS

.field-name
           {
          color: #444;
          font-family: verdana;
         font-size: 0.85em;
         line-height: 2em;
            }

JavaScript

function makeChoice()

    {
      if (document.getElementById('but1').checked)
       {

         document.getElementById('box2').addAttribute= "readonly";

       }
      if (document.getElementById('but2').checked)
       {

        document.getElementById("box1").readonly = true;
        }

       }