Inibir campo de formulário

[Laysilva 0]

Criei um formulário em html , mas queria inibis o campo cnpj , dependendo de qual opção o usuário marcar. 

Está assim : 
 

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
            </div>
            <br>
            <div class="row">
                <div class="col">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="tipo_empresa" id="pj" value="pj">
                        <label class="form-check-label" for="pj">Pessoa Jurídica</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="tipo_empresa" id="pf" value="pf">
                        <label class="form-check-label" for="pf">Pessoa Física</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="responsavel" id="socio" value="socio">
                        <label class="form-check-label" for="socio">Sócio</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="responsavel" id="procurador" value="procurador">
                        <label class="form-check-label" for="procurador">Procurador</label>
                    </div>
                </div>
            </div>
            <br>
            <div>
            <div class="row">
                <div class="col">
                    <label  for="cnpj">CNPJ/CPF</label >  
                    <input id="cnpj" name="cnpj" type="String" placeholder="Digite seu CNPJ/CPF" class="form-control input-md" required>
                </div>
                <div class="col">
                    <label  for="doc_empresa">Dados da Empresa</label >
                    <div class="form-group">
                        <input type="file" name="img" multiple class="form-control-file" accept=".pdf">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label  for="cpf">CPF</label>  
                    <input id="cpf" name="cpf" type="String" placeholder="Digite o CPF" class="form-control input-md" required>
                </div>
                <div class="col">
                    <label  for="email">E-mail</label>  
                    <input id="email" name="email" type="email" placeholder="Digite o seu E-amil" class="form-control input-md" required>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label for="inputPassword3">Data e Hora</label>
                    <input type="date" class="form-control" name="data" placeholder="Data">
                </div>
                <div class="col">
                    <label for="nome">Nome</label>  
                    <input id="nome" name="nome" type="text" placeholder="Digite o Nome do Respnsável Legal" class="form-control input-md" required>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label  for="tel">Telefone</label>  
                    <input id="tel" name="tel" type="double" placeholder="Digite o seu Telefone" class="form-control input-md" required>
                </div>
                <div class="col">
                    <label  for="endereco">Bairro</label>  
                    <input id="endereco" name="endereco" type="String" placeholder="Digite o Bairro" class="form-control input-md" required>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label  for="rua">Rua</label>  
                    <input id="rua" name="rua" type="String" placeholder="Digite o nome da rua" class="form-control input-md" required>
                </div>
                <div class="col">
                    <label  for="cep">CEP</label>  
                    <input id="cep" name="cep" type="double" placeholder="Digite o cep" class="form-control input-md" required>
                </div>
            </div> 
            <br><br><br><br>
            <div class= "offset-md-5 col-md-12">
                <button type="submit" class="btn btn-dark col-md-1">Cadastrar</button>
            </div>
        </div>
    </div>

</form>

 

 

Eu tentei fazer mas tá dando erro atrás de erro . Eu imagino que seja algo bem bobo , mas não acho .
Alguém poderia me mostrar o caminho . 
MUITO OBRIGADA :)

[Gleyson Abreu 49]

Com base na seleção dos radio button você quer definir quais campos serão exibidos?

[Laysilva 0]

Isso , no caso exibidos todo , mas ficar cinza bloqueado pra escrever neles 

[Gleyson Abreu 49]

Você pode usar esse script:

$('input[name="tipo_empresa"]').change(function () {
    if ($('input[name="tipo_empresa"]:checked').val() === "pj") {
        alert("PJ")
    } else {
        alert("PF")
    }
});

Você ocultaria as opções e quando se clica em um dos inputs PJ OU PF aparecia somente o que você desejasse.

[Laysilva 0]

em qual parte eu encaixo os comandos ?