How to draw readonly from input

Navigation
0

I'm trying to make clicking button btnEditar free inputs : funcionário , rca and regiao ... I used this script but it did not work: 

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

These are the inputs and the 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>

I click and do nothing. This form is in a modal if this information is important.

    
asked by anonymous 29.11.2017 / 11:17

5 answers

1

The problem seems to me because you're using jquery before it's set, pass your javascript tags to the bottom of the page after the jquery library include

    
29.11.2017 / 12:43
5

Just correct your selector by putting single quotes around input[name="funcionario]" and then correct readyonly correct is readonly read = read and only = only. 

$("#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><divclass='form-group'><divclass='col-xs-12'><center><labelfor='exampleInputPassword1'>Funcionário</label></center><inputtype='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>
    
29.11.2017 / 11:29
1

Well there are some minor syntax errors in your code that are affecting the way it works.

Check the closing of your <div class='form-group'> since some were without </div>

Do not use quotation marks to refer to the DOM:

Change% with% by% with%

Put every input selector in quotation marks:

Torque $('document') by $(document)

The correct property name is readOnly: Change% by% by% by% 

$(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><divclass='form-group'><divclass='col-xs-12'><center><labelfor='exampleInputPassword1'>Funcionário</label></center><inputtype='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>
    
29.11.2017 / 13:10
0

You can also do this: 

 $('input[name="regiao"]').prop('readonly', false);
    
29.11.2017 / 12:14
-2

I believe the error is this: 

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

Because you are waiting for a click on the document. To get the click of the button just modify your code like this: 

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

In this way the event will fire at the click of the button.

    
29.11.2017 / 12:20
message: "div is not defined" Integer reading via console