How to disable an input field?

Question

After receiving a value, how to block an input field so that it does not have its value changed? below there are two fields; how to block only the field 'FANTASY NAME' and keep 'CNPJ' to receive a new value?

$(document).ready(function(){

  $('#pesquisar').on('click', function(e) {
    
   
    e.preventDefault();
    
   
    var cnpj = $('#cnpj').val().replace(/[^0-9]/g, '');
    
    
    if(cnpj.length == 14) {
    
     
      $.ajax({
        url:'https://www.receitaws.com.br/v1/cnpj/' + cnpj,
        method:'GET',
        dataType: 'jsonp',
        complete: function(xhr){
        
         
          response = xhr.responseJSON;
          
       
          if(response.status == 'OK') {
          
          
            $('#nome').val(response.fantasia);
            ;
          
          } else {
            alert(response.message);
          }
        }
      });
    
   
    } else {
      alert('CNPJ inválido');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formu">
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102"><!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    					<input id="pesquisar" type="button" name="pesqui" value="Pesquisar"><!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
        
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>

Answer 1

Since this element has ID you can simply use

document.getElementById('nome').disabled = true;
// ou para ficar só de leitura
document.getElementById('nome').readOnly = true;

Example:

$('#pesquisar').on('click', function(e) {
  e.preventDefault();
  document.getElementById('nome').readOnly = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formu">
  <p>Cadastro de Empresa</p>
  <fieldset id="first">

    <label for="cnpj">CNPJ</label><br/>
    <input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102">
    <!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    <input id="pesquisar" type="button" name="pesqui" value="Pesquisar">
    <!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>

    <label for="nome">Nome fantasia</label><br/>
    <input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
  </fieldset>

  <br/><input id=save type="submit" name="salvar" value="Salvar">
</form>

Note: Fields with disabled and fields with display: none; (previous to IE9) are not sent with the submit form.

Answer 2

To block the change in that input, use jQuery to assign readonly (read-only) to the countryside.

Code:

$('#nome').prop('readonly', true);

Answer 3

For disable="disable" in input Ex:

<input type="text" id="" name="" value="exemplo" disabled="disabled"/>