JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function toggleExternal() {
document.getElementById("extText").disabled = false;
var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = true;
}
}
function toggleDivision() {
document.getElementById("extText").disabled = true;
var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = false;
}
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
ID: 50<br>
<input type="hidden" name="id" value="50" />
<label for = "client1">
<input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
</label>
                                     
<label for ="client2">
<input type="radio" name="client_type" id = "client2" value="External" onclick="toggleExternal()"/> External
</label>
 
<input disabled type="text" id="extText" name="client_details2" value="rrrrrr"/>
<br><br>
<div id="division">
Division:
<select name="client_details">
<option value="Choose" />Choose Division...</option>
<option value="Distribution" />Distribution</option>
<option value="Transmission" />Transmission</option>
<option value="Generation" />Generation</option>
<option value="Procument" />Procument</option>
<option value="Other" />Others</option>
</select>
<br><br>
...