0

Estou tentando fazer com que ao clicar no button btnEditar libere os inputs: funcionário, rca e regiao... usei esse script porém não funcionou:

<script language='JavaScript'>
 $('document').on('click','#btnEditar', function(){ $(input[name="funcionario"]).removeAttr('readyonly'); $(input[name="rca"]).removeAttr('readyonly'); $(input[name="regiao"]).removeAttr('readyonly'); });
</script>

Esses são os inputs e o button:

<div class='form-group'>
    <div class='col-xs-12'><center>
        <label for='exampleInputPassword1'>Funcionário</label></center>
        <input type='text' name='funcionario' class='form-control' id='exampleInputPassword1' value=".$row['funcionario']." style='text-align: center;' readonly='readonly' >
    </div>
</div>

<div class='form-group'>
    <div class='col-xs-12'><center>
        <label for='exampleInputPassword1'>RCA</label></center>
        <input type='text' name='rca' class='form-control' id='exampleInputPassword1' value=".$row['rca']." style='text-align: center;' readonly='readonly' >
    </div>
</div

<div class='form-group'>
    <div class='col-xs-12'><center>
        <label for='exampleInputPassword1'>Região</label></center>
        <input type='text' name='regiao' class='form-control' id='exampleInputPassword1' value=".$row['regiao']." style='text-align: center;' readonly='readonly' >
    </div>
</div

<div class='form-group'>
    <div class='col-xs-6'>
        <button type='button' class='btn btn-default btn-lg btn-block' role='button' id='btnEditar'><span class='glyphicon glyphicon-pencil'></span>&nbsp;Editar</button>
    </div>
</div>

Eu clico e não faz nada. Esse formulário está em um modal, se essa informação for importante.

5 Respostas 5

5

Apenas corrija o seu seletor colocando aspas simples em volta input[name="funcionario]" e depois corrija o readyonly o correto é readonly de read = ler e only = apenas.

$("#btnEditar").on('click', function() {
  $('input[name="funcionario"]').removeAttr('readonly');
  $('input[name="rca"]').removeAttr('readonly');
  $('input[name="regiao"]').removeAttr('readonly');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='form-group'>
  <div class='col-xs-12'>
    <center>
      <label for='exampleInputPassword1'>Funcionário</label></center>
    <input type='text' name='funcionario' class='form-control' id='exampleInputPassword1' value=".$row['funcionario']." style='text-align: center;' readonly='readonly'>
  </div>
</div>

<div class='form-group'>
  <div class='col-xs-12'>
    <center>
      <label for='exampleInputPassword1'>RCA</label></center>
    <input type='text' name='rca' class='form-control' id='exampleInputPassword1' value=".$row['rca']." style='text-align: center;' readonly='readonly'>
  </div>
</div <div class='form-group'>
<div class='col-xs-12'>
  <center>
    <label for='exampleInputPassword1'>Região</label></center>
  <input type='text' name='regiao' class='form-control' id='exampleInputPassword1' value=".$row['regiao']." style='text-align: center;' readonly='readonly'>
</div>
</div <div class='form-group'>
<div class='col-xs-6'>
  <button type='button' class='btn btn-default btn-lg btn-block' role='button' id='btnEditar'><span class='glyphicon glyphicon-pencil'></span>&nbsp;Editar</button>
</div>
</div>

5
  • Dê uma conferida em: stackoverflow.com/questions/5891734/…
    – NIZZOLA
    29/11/2017 às 10:32
  • @Gabriel então fiz do jeito que falou, pode ter sido resolvido algum erro, mais mesmo assim, ainda não faz nada quando clico no button
    – Ferb
    29/11/2017 às 10:47
  • se voce fizer um alert('exemplo') dentro do click ele é disparado? 29/11/2017 às 10:52
  • não, você quer ver o código completo?
    – Ferb
    29/11/2017 às 10:55
  • @GabrielRodrigues postei o código todo na resposta
    – Ferb
    29/11/2017 às 11:19
1

O problema parece-me porque você está a utilizar jquery antes de ele estar definido, passe as suas tags javascript para o fundo da pagina depois do include da libraria do jquery

1
  • isso mesmo, valeu cara
    – Ferb
    29/11/2017 às 11:56
1

Bom tem alguns pequenos erros de sintaxe no seu código que estão afetando o funcionamento.

Verifique o fechamento de suas <div class='form-group'> pois algumas ficaram sem </div>

Não utilize aspas para se referênciar ao DOM:

Troque $('document') por $(document)

Coloque todo seletor do input entre aspas:

Torque $(input[name="funcionario"]) por $("input[name='funcionario']")

O nome correto da propriedade é readOnly: Troque 'readyonly' por 'readonly'

$(function(){ //Onload, ao carregar 

  $(document).on('click','#btnEditar', function(){
   //Existe mais de uma forma de você remover o readonly.
   //Demonstrarei 2 formas abaixo:

     $("input[name='funcionario']").removeAttr('readonly');
     $("input[name='rca']").prop('readonly', false);
     $("input[name='regiao']").prop('readonly', false);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='form-group'>
    <div class='col-xs-12'>
    <center>
      <label for='exampleInputPassword1'>Funcionário</label>         </center>
    <input type='text' name='funcionario' class='form-control' id='exampleInputPassword1' value=".$row['funcionario']." style='text-align: center;' readonly='readonly' >
    </div>
</div>

<div class='form-group'>
    <div class='col-xs-12'>
    <center>
        <label for='exampleInputPassword1'>RCA</label>
    </center>
    <input type='text' name='rca' class='form-control' id='exampleInputPassword1' value=".$row['rca']." style='text-align: center;' readonly='readonly' >
    </div>
</div>

<div class="form-group">
    <div class='col-xs-12'>
    <center>
       <label for='exampleInputPassword1'>Região</label>             </center>
    <input type='text' name='regiao' class='form-control' id='exampleInputPassword1' value=".$row['regiao']." style='text-align: center;' readonly='readonly' >
    </div>
</div>

<div class='form-group'>
    <div class='col-xs-6'>
        <button type='button' class='btn btn-default btn-lg btn-block' role='button' id='btnEditar'>
          <span class='glyphicon glyphicon-pencil'></span>
          &nbsp;Editar
        </button>
    </div>
</div>

0

Tambem pode fazer assim:

 $('input[name="regiao"]').prop('readonly', false);
1
  • nada de funcionar, nenhuma das duas formas funciona...
    – Ferb
    29/11/2017 às 11:18
-2

Acredito que o erro seja esse:

$('document').on('click', function() {.....}

Pois você está aguardando um click no documento. Para pegar o click do botão basta modificar seu código assim:

$("#btnEditar").on('click', function() {.....}

Dessa forma o evento vai disparar ao click do botão.

1
  • poderia ser, porém não funciona, postei o código em uma resposta de como ele está...
    – Ferb
    29/11/2017 às 11:21

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 .