When clicking on a radio button, disable textarea

Question

When clicking on a radio button, disable textarea

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

How can I disable the textarea when I click on a radio button that is listed according to the information coming from a database. See below:

IwouldlikethatwhenyouclickNo,thejustificationtextareareferenced,wouldbedisabled.Theinitialcodelookslikethis:

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>";
}

javascript jquery

asked by anonymous 03.04.2018 / 20:53

2 answers

3

You can get the .button event from 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;
    }            
});

03.04.2018 / 21:08

problem with form with tabs How to call the same method with different arguments but inherit from the same parent class?

score 1 · Accepted Answer

You can do this:

$("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>