When clicking a radio button, disable the textarea

Question

How do I to disable the textarea by clicking on a radio button that is listed according to the information coming from a database. Look below:

I would like to click on Not, the textarea of reference justification was disabled. The initial code is thus:

while($jmListar = mysqli_fetch_object($sqlListar)){
$listar .= "<td>
          <div class='radio-group'>
              <label class='radio-label'>
                  <input name='Cancelar_$jmListar->IdCadastros' type='radio' checked='checked' value='S' id='sim'>
                  <span class='inner-label' style='color: #008000; font-weight: bold'>Sim</span>
              </label>
              <label class='radio-label'>
                  <input name='Cancelar_$jmListar->IdCadastros' type='radio' value='N' id='nao'>
                  <span class='inner-label' style='color: #F00; font-weight: bold'>Não</span>
              </label>
           </div>
         </td>";
$listar .= "<td><textarea name='Justificativa_$jmListar->IdCadastros' class='form-control' id='justificativa' disabled></textarea></td>";
$listar .= "</tr>";
}

Answer 1

You can take the event . change the radiobutton

<input ... class="rButton">
<input ... class="rButton">
<textarea id="justificativa">
Script

​$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'S' :
        $("#justificativa").prop("disabled", false);
            break;
        case 'N' :
            $("#justificativa").prop("disabled", true);
            break;
    }            
});​

Answer 2

You can do it this way:

$("input[type='radio'][name*='Cancelar']").click(function(){

   $(this).closest("tr")
   .find("textarea")
   .prop("disabled", $(this).val() == "S" ? false : true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
          <div class='radio-group'>
              <label class='radio-label'>
                  <input name='Cancelar_1' type='radio' checked='checked' value='S' id='sim'>
                  <span class='inner-label' style='color: #008000; font-weight: bold'>Sim</span>
              </label>
              <label class='radio-label'>
                  <input name='Cancelar_1' type='radio' value='N' id='nao'>
                  <span class='inner-label' style='color: #F00; font-weight: bold'>Não</span>
              </label>
           </div>
         </td>
<td><textarea name='Justificativa_2' class='form-control' id='justificativa'></textarea></td>
</tr>

<td>
          <div class='radio-group'>
              <label class='radio-label'>
                  <input name='Cancelar_2' type='radio' checked='checked' value='S' id='sim'>
                  <span class='inner-label' style='color: #008000; font-weight: bold'>Sim</span>
              </label>
              <label class='radio-label'>
                  <input name='Cancelar_2' type='radio' value='N' id='nao'>
                  <span class='inner-label' style='color: #F00; font-weight: bold'>Não</span>
              </label>
           </div>
         </td>
<td><textarea name='Justificativa_$jmListar->IdCadastros' class='form-control' id='justificativa'></textarea></td>
</tr>
</table>