need to make choice field editable and read only based on field selection in ui page

[Prem13]

created a radio button and choice field

so on onload of the ui page the choice field is made read only.

but now on selecting the radio button the choice field needs to be editable in ui page

html:-
	<input type="radio" value="value2" name="country" id="radiocountry" ></input><label>Country</label> $[SP]$[SP]
<select id="country">
		<j:while test="${country1.next()}">
		<option value="${country1.country}">${country1.country}</option>
		</j:while>
	</select>

Client script:-
document.getElementById("country").setAttribute('disabled', false);

radiocountry.addEventListener("change", function() {
   

   document.getElementById("country").setAttribute('disabled', true);

    
});

on onload it is working but on select of the radio button im not able to make the choice field editable

[Rishabh Jha · Accepted solution]

Hi Prem,

Please try the code as mentioned below in your client script. It should work - 

var countryDdl = document.getElementById("country");
var radiocountry = document.getElementById("radiocountry");

countryDdl.setAttribute('disabled', true);
radiocountry.addEventListener("change", function() {
 countryDdl.disabled = false;
});

Explanation: The problem here is that you're trying to set disabled to false via setAttribute(), which doesn't do what you're expecting.  You should instead remove the complete attribute, or set that property directly.

i.e either by -

countryDdl.removeAttribute("disabled");

OR


countryDdl.disabled = false;

Thanks & Regards,
Rishabh Jha
Aavenir (https://www.aavenir.com/)