3

Estou Fazendo uma aplicação de validação de respostas para determinada pergunta, necessito que quando o <input type="checkbox"> for selecionado seja adicionada um atributobox-shadow a <textarea> da resposota.

O que eu tentei fazer no JQuery nao surgiu efeito no formulario.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    if ($("input.correta").is(":checked")) {
      $(this).closest("textarea").css("box-shadow", "1px 1px 10px #0c6f00");
    } else {
      $(this).closest("textarea").css("box-shadow", "none");
    }
  });
</script>

código HTML

  <div class='form-group respostas' id='resposta1'>
<div class='row form-control'>
  <div class='span8'>
    <textarea style='resize:none' class='span8' rows='3' placeholder="1º Resposta" maxlength='255' id='resposta1'></textarea>
  </div>
</div>
<span class='help-block text-right'>
  <label class='btn btn-success'>
    <input type='checkbox' style='margin-top:0px' class="correta" name='resposta' value='resposta1'> Marcar como Correta
  </label> 
</span></div>

2 Respostas 2

2

Precisa capturar o evento:

$(document).ready(function() {
    $('input.correta').on('change', function() {
  
  	if ($(this).is(":checked")) {
          $('#resposta1 .span8').css("box-shadow", "1px 1px 10px #0c6f00");
        } else {
          $('#resposta1 .span8').css("box-shadow", "none");
      }
  })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-group respostas' id='resposta1'>
<div class='row form-control'>
  <div class='span8'>
    <textarea style='resize:none' class='span8' rows='3' placeholder="1º Resposta" maxlength='255' id='resposta1'></textarea>
  </div>
</div>
<span class='help-block text-right'>
  <label class='btn btn-success'>
    <input type='checkbox' style='margin-top:0px' class="correta" name='resposta' value='resposta1'> Marcar como Correta
  </label> 
</span></div>

EXEMPLO no jsfiddle

0

Cria uma classe CSS

.sombra-textarea{    
  box-shadow: 1px 1px 10px #0c6f00
}

E no jquery utilize addClass e removeClass

$(document).ready(function() {
    if ($("input.correta").is(":checked")) {
      $('#resposta1').addClass("sombra-textarea");
    } else {
      $('#resposta1').removeClass("sombra-textarea");
    }
  });
1
  • lembrando que para funcionar em todos os navegadores, importante inserir -webkit-box-shadow e -moz-box-shadow: 29/06/2016 às 12:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .