JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Enable / Disable</title>
<script>
    function txt_enable(obj_checkbox, obj_textarea)
    {  if(obj_checkbox.checked)
       { obj_textarea.readOnly= false;
       }
       else
       { obj_textarea.readOnly= true;
       }
    }
 
          function chk_enable(obj_textarea, obj_checkbox)
    {  if(obj_textarea.readOnly)
       { obj_textarea.readOnly = false;
        obj_checkbox.checked = true;
       }

    }  
    
    function opv_enale(x)
    {  if(x.options[x.selectedIndex].value==1)
       { obj_textarea.readOnly= false;
       }
       if(x.options[x.selectedIndex].value==2)
       { this.form.kairi_info.readOnly= true;
    this.form.kairi.checked = true;
       }
    }
</script>
</head>
<body>
  <form>
      
<select onchange="opv_enable(this)">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select><br>
      <br>
    <input type="checkbox" onclick="txt_enable(this, this.form.mkr_info)" name="mkr">Lunch<br>
    <textarea name="mkr_info" readonly="true" onclick="chk_enable(this, this.form.mkr)" placeholder="Please describe why"></textarea> <br><br>
          <input type="checkbox" id="checkbox" onclick="txt_enable(this, this.form.kairi_info)" name="kairi">Lunch<br>
 <textarea name="kairi_info" readonly="true"  onclick="chk_enable(this, this.form.kairi )">Lunch menu<br>Pizza ,roll,coffe</textarea>
 
  </form>
</body>
</html>