Arquivo Discussoes de Programacao e Tecnologia 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.
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')
{
}
});
Troue os “=” dos ifs para “==”
Edite a sua pergunta e arrume por favor
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 );
}
});
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.
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")
}
}
Obrigado, funcionou.