How to take input readonly

Question

I’m trying to get that by clicking on button btnEditar release the inputs: funcionário, rca and regiao... I used this script but it didn’t 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 that information is important.

Answer 1

Just fix your selector by putting simple quotes around input[name="funcionario]" and then fix the readyonly the 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>
<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>

Answer 2

The problem seems to me because you are using jquery before it is set, pass your javascript tags to the bottom of the page after jquery include

Answer 3

Well there are some small syntax errors in your code that are affecting the functioning.

Check the closure of your <div class='form-group'> for some were left without </div>

Do not use quotes to refer to the DOM:

Change $('document') for $(document)

Place every input selector between quotation marks:

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

The correct name of the property is readonly: Change 'readyonly' for '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>

Answer 4

You can do it like this:

 $('input[name="regiao"]').prop('readonly', false);

Answer 5

I believe that’s the mistake:

$('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 so:

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

That way the event will fire at the click of the button.