Enabling multiple textareas based on radiobutton response

Question

Here is the problem I am trying to solve: I have a long list of questions.

Each question includes a response section, which consist of 4 radiobuttons (Yes, No, Not Seen and Not Applicable) and two textareas;

Now, textarea "observation" is disabled by default. Only user's response "No" enables this textarea.

Question: How to apply the same logic to every textarea "observation" throughout the entire set of questions.

What I have at the moment is: A. HTML for Response buttons

<div id="Response">
  <label><input type="radio" name="Radio419" value="Y" id="Radio_419Y" onchange='radioChange(this)'>Yes</label>
  <label><input type="radio" name="Radio419" value="N" id="Radio_419N" onChange='radioChange(this)'>No</label>
  <label><input type="radio" name="Radio419" value="NS" id="Radio_419NS" onChange='radioChange(this)'>Not Seen</label>
  <label><input type="radio" name="Radio419" value="NA" id="Radio_419NA" onChange='radioChange(this)'>Not Applicable</label>
</div>

B. HTML for Textboxes

 <span id="responseDetails">
 <div id="Comment">
   <label for="comment">Comment:</label>
   <textarea name="comment" id="Comm419"</textarea></div>
 <div id="Observation">
   <label for="observation">Observation:</label>
   <textarea name="observation" id="Obs419"</textarea></div>
 </span>

C. JS for processing THIS question only

<script type="text/javascript">
document.radioChange = function (button)
  {if(button.checked ) {if (button.value === "N") 
    {document.getElementById("Obs419").removeAttribute("disabled")}
    else
{document.getElementById("Obs419").setAttribute("disabled",true)}}}
</script>

Now as it is apparent I can only apply this to question 419, referring to textbox Observation (Obs419). How do I apply JS to cover other questions, because textareas are going to be the same throughout the questionnaire. Textarea id changes with every new question (Obs420, Obs421 etc).

Thank you in advance.

Answer 1

If you can pass the id into radioChange() function like this onchange='radioChange(this, '419')'

 <label><input type="radio" name="Radio419" value="Y" id="Radio_419Y" onchange='radioChange(this, '419')'>Yes</label>

Then you will get that id of radio button(which would be clicked) inside radioChange() and with that dynamic id you need to just write below code.

document.radioChange = function (button, id)
  {if(button.checked ) {if (button.value === "N") 
    {document.getElementById("Obs"+id).removeAttribute("disabled")}
    else
{document.getElementById("Obs"+id).setAttribute("disabled",true)}}}

UPDATE

First of all, your both textarea tags are not closed

<textarea name="comment" id="Comm419" </textarea></div>
//-----------------------------------^

Second you will have to pass id within double quote "" , like

onchange='radioChange(this, "419")'

Here is the DEMO with passing dynamic id.