Habilitar e desabilitar input a partir de uma valor

Front-end JavaScript
#1

Fala galera…
Estou com dúvida referente a habilitar e desabilitar campos de acordo com um select selecionado
Tenho um select com 3 opções:

Entrada
Saída
Ambas

Tenho 4 inputs text sendo:

Preciso que se o select for selecionado Entrada, os campos de “periodo_ate” e “hora_ate” sejam desabilitados. Se o select for selecionado Saída, os campos “periodo_de” e “hora_de” sejam desabilitados, e se o select selecionado for Ambos, os 4 inputs devem estar habilitados.

Obrigado pela ajuda.

#2

Dá para fazer com javascript com jQuery facilmente.

$("#IDSELECT").change(function()
{
	let valor = $(this).val();
	if(valor == 'Entrada')
	{

		//para desabilitar
		$("#SELECIONE SEU INPUT").attr("readonly","readonly");

	}
	if(valor == 'Saída')
	{

	}

	if(valor == 'Ambos')
	{


	}
});
#3

Troue os “=” dos ifs para “==”

#4

Edite a sua pergunta e arrume por favor

#5

com jquary tu faz assim…
como eu não sei com o value que tu está passando no seu select e o id dos campos passei uns de exemplo… é só substituir os id…

$('#componente').change(function () {

    var valor = $('#componente').val();

    if(valor=='Entrada'){
       $( "#periodo_ate" ).prop( "disabled", true );
	$( "#hora_ate" ).prop( "disabled", true );
       
    }if(valor=='Saída')
    {
      $( "#periodo_de" ).prop( "disabled", true );
      $( "#hora_de" ).prop( "disabled", true );
    }
       if(valor=='Ambas'){
       $( "#periodo_ate" ).prop( "disabled", false );
	$( "#hora_ate" ).prop( "disabled", false );
	
	$( "#periodo_de" ).prop( "disabled", false );
      $( "#hora_de" ).prop( "disabled", false );
        }   
});
#6

Obrigado pelas respostas.
Cleiton, consegui fazer dessa forma, porém após selecionar não é possível alterar.
Por exemplo, A escolha foi Entrada, após eu informar o período_de e a hora_de, alterei a escolha para Saída e os inputs continuaram desabilitados, nesse caso gostaria que eles ficassem habilitados e os campos periodo_de e hora_de ficasse em brancos e novamente desabilitados.
Obrigado.

#7

JavaScript puro, sem o problema dos inputs desabitados que não voltam ao normal.

function inputSelect(){
     opcaoSelect = document.getElementById("inputSelecao").value
     dataSaida = document.getElementById("inputSaida")
     dataEntrada = document.getElementById("inputEntrada")

     if (opcaoSelect == "Entrada"){	
         dataEntrada.removeAttribute("disabled")
         dataSaida.setAttribute("disabled", false)
     } else if (opcaoSelect == "Saida") {
         dataSaida.removeAttribute("disabled")
         dataEntrada.setAttribute("disabled", false)
     } else {
         dataSaida.removeAttribute("disabled")
         dataEntrada.removeAttribute("disabled")
     }
}
#8

Obrigado, funcionou.