Stack Overflow em Português Asked by Bruno Henrique on January 17, 2021
Já peço desculpas desde já se não conseguir ser claro o suficiente, mais eu necessitava de fazer um formulário que quando marcassem determinado checkbox, apareceriam divs que estariam ocultas com o determinado conteúdo para ser preenchido, até aí tudo bem, consegui encontrar aqui no StackOverflow uma pergunta que solucionava isto (Mostrar e ocutar campos e conforme campo checkbox selecionado?), acontece que ao clicar em um botão submit para eu carregar em outra página para incluir no banco de dados, os campo marcado como required mesmo estando ocultos, eles são levado em consideração e o site fica aguardando o preenchimento deles.
Tentei usar o método .attr(), mais não sei se não usei direito, ele não deu certo.
Tentei comentar a resposta do link que encontrei, mas não tenho pontuação suficiente para comentar.
Alguém pode me ajudar a desabilitar o required quando o input não estiver visível?
$('#segmento input[type="checkbox"]').change(function() {
let name = this.value;
$('[data-label=' + name + ']').css('display', this.checked ? '' : 'none');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="margin: 0 auto;" id="divAreaServico">
<label for="segmento" class="control-label col-md-1">Segmento:</label>
<div class="col-md-8">
<div class="checkbox" id="segmento">
<label><input type="checkbox" name="outsourcing" value="outsourcing">Outsourcing</label>
<label><input type="checkbox" name="auditoria" value="auditoria">Auditoria</label>
<label><input type="checkbox" name="consultoria" value="consultoria">Consultoria</label>
</div>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="divOutsourcing" data-label="outsourcing">
<label for="out" class="control-label col-md-1">Outsourcing:</label>
<div class="col-md-8">
<div class="checkbox" id="outsourcing">
<label><input type="checkbox" name="contabil" value="contabil">Contábil</label>
<label><input type="checkbox" name="financeira" value="financeira">Financeira</label>
<label><input type="checkbox" name="fiscal" value="fiscal">Fiscal</label>
<label><input type="checkbox" name="folhaPagamento" value="folhaPagamento">Folha de Pagamento</label>
</div>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="divConsultoriaOpcoes" data-label="consultoria">
<div class="col-md-8">
<label for="consultoriaOpcoes" class="control-label vForm"> Consultoria:</label>
<input type="text" class="form-control" name="consultoriaOpcoes" id="consultoriaOpcoes" required />
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="divAuditoriaOpcoes" data-label="auditoria">
<div class="col-md-8">
<label for="auditoriaOpcoes" class="control-label vForm"> Auditoria:</label>
<input type="text" class="form-control" name="auditoriaOpcoes" id="auditoriaOpcoes" required />
</div>
</div>Consegui fazer deste jeito:
Ao marcar o checkbox aparecerá a div correspondente.
Dentro do JavaScript eu faço a verificação de cada checkbox que foi marcado, se determinado checkbox foi marcado eu paço o parametro de required = true para os inputs que se encontram dentro da div mostrada.
<br>
<div id="container-botoes2">
<a href="#" id="back-to-top" title="Voltar ao início"><i class="button fa fa-chevron-up"></i></a>
</div>
<div class="contorno form-group col-md-12" style="background-color: white;">
<div id="dados_frota">
<div class="form-row">
<div class="form-group col-md-1"></div>
<div class="form-group col-md-10 contorno" id="segmento">
<strong style="font-size:18px">RELATÓRIO DE VISITA TÉCNICA</strong><br>
<strong>Processo nº </strong> <?php echo $dado['numero_processo']; ?>
<strong>Cidade: </strong> <?php echo $dado['nome_municipio']; ?> <br>
<strong>Engenheiro: </strong> <?php echo $responsavel; ?>
<strong>Data: </strong> <?php echo $data_inclusao; ?><br><br>
Serviços Asfálticos:
<input type="checkbox" name="recap_asfaltico" value="recap_asfaltico" id="btn-ativa2" onclick="checkedBtnRecapAsfaltico()"> <a href="#sa2.0" >2.0 RECAPEAMENTO ASFÁLTICO;</a>
<br>
Serviços Diversos:
<input type="checkbox" name="drenagem" value="drenagem" id="btn-ativa3" onclick="drenagem()"> <a href="#sd1.0" >1.0 DRENAGEM DE ÁGUAS PLUVIAIS;</a>
<br>
<a href="#obs_geral" >Observações Gerais;</a>
<a href="#analise" >Análise do Engenheiro.</a>
</div>
</div>
</div>
</div>
<form action="salvar_licitacao.php" method="post" enctype="multipart/form-data">
<div class="contorno form-group col-md-12" style="background-color: white;">
<div id="dados_frota" class="">
<div class="form-row">
<div class="form-group col-md-1"></div>
<div class="form-group col-md-10 contorno" >
<div class="form-group col-md-12 contorno">
<a name="sa1.0" id="sa1.0"></a>
<strong style="font-size:17px">Serviços Asfálticos</strong>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="pav_asfaltica">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">1.0 PAVIMENTAÇÃO ASFÁLTICA</strong>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">1.1 - Local de bota fora</label>
</div>
<div class="form-row col-md-9 ">
<input type="text" class="form-control col-md-6" name="" id="bota-fora" value="" title="EXISTE LOCAL PARA BOTA-FORA" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">1.2 - Distância do bota-fora</label>
</div>
<div class="form-row col-md-9 ">
<input type="text" class="form-control col-md-6" name="" id="dist-bota-fora" value="" title="QUAL A DISTÂNCIA DO BOTA-FORA" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">1.3 - Tipo de solo</label>
</div>
<div class="form-row col-md-9 ">
<input type="text" class="form-control col-md-6" name="" id="tipo-solo" value="" title="QUAL O TIPO DE SOLO" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">1.4 - Jazida</label>
</div>
<div class="form-row col-md-9 ">
<select class="form-control col-md-6" name="txt_modalidade" id="jazida">
<option value="">Existe à possibilidade de jazida no local</option>
<option value="SIM"> SIM</option>
<option value="NÃO"> NÃO</option>
</select>
</div>
</div>
<input type="text" class="form-control col-md-12" name="" id="pav-asf-obs-contr-tecn" value="" placeholder="OBSERVAÇÃO DO CONTROLE TECNOLÓGICO">
<input type="text" class="form-control col-md-12" name="" id="pav-asf-obs" value="" placeholder="OBSERVAÇÃO SOBRE A PAVIMENTAÇÃO ASFÁLTICA">
<a name="sa2.0" id="sa2.0"></a>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="recap_asfaltico">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">2.0 RECAPEAMENTO ASFÁLTICO</strong>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">2.1 - Condição da rua em relação à buracos</label>
</div>
<div class="form-row col-md-9 ">
<input type="text" class="form-control col-md-6" name="" id="buracos" value="" title="CONDIÇÕES DA RUA QUANTO A BURACOS" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">2.2 - Existe à necessidade de limpeza</label>
</div>
<div class="form-row col-md-9 ">
<select class="form-control col-md-6" name="txt_modalidade" id="limpeza">
<option value="">Precisa realizar limpeza</option>
<option value="SIM"> SIM</option>
<option value="NÃO"> NÃO</option>
</select>
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">2.3 - Existe à necessidade de poda de árvores</label>
</div>
<div class="form-row col-md-9 ">
<select class="form-control col-md-6" name="txt_modalidade" id="arvores">
<option value="">Precisa realizar poda de árvores</option>
<option value="SIM"> SIM</option>
<option value="NÃO"> NÃO</option>
</select>
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-3 ">
<label for="" style="color:red;">2.4 - Existe a necessidade de uma regularização antes do recapeamento</label>
</div>
<div class="form-row col-md-9 ">
<select class="form-control col-md-6" name="txt_modalidade" id="recapeamento">
<option value="">Precisa re regularização antes do recapeamento</option>
<option value="SIM"> SIM</option>
<option value="NÃO"> NÃO</option>
</select>
</div>
</div>
<input type="text" class="form-control col-md-12" name="" id="rec-asf-obs-contr-tecn" value="" placeholder="OBSERVAÇÃO DO CONTROLE TECNOLÓGICO">
<input type="text" class="form-control col-md-12" name="" id="rec-asf-obs" value="" placeholder="OBSERVAÇÃO SOBRE O RECAPEAMENTO ASFÁLTICA">
</div>
</div>
</div>
<div class="form-group col-md-1 "></div>
<div class="form-group col-md-1 "></div>
<div class="form-group col-md-12 contorno">
<a name="sd1.0" id="sd1.0"></a>
<strong style="font-size:17px">Serviços Diversos</strong>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="drenagem">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">1.0 DRENAGEM DE ÁGUAS PLUVIAIS</strong>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">1.1 - Tubulação</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="tubulacao" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">1.2 - Poços de Visita</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="pocos-visita" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">1.3 - Bocas de Lobo</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="boca-lobo" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">1.4 - Alas/Dissipadores</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="alas-dissipadores" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">1.5 - Outros</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="drenagem-outros" value="" >
</div>
</div>
<a name="sd2.0" id="sd2.0"></a>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="esgoto">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">2.0 REDE COLETORA DE ESGOTO</strong>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">2.1 - Tubulação</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="tubulacao-esgoto" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">2.2 - Poços de Visita</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="pocos-visita-esgoto" value="" >
</div>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">2.3 - Outros</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="outros-esgoto" value="" >
</div>
</div>
<a name="sd3.0" id="sd3.0"></a>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="agua_potavel">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">3.0 REDE DE ÁGUA POTÁVEL</strong>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">3.1 - Tubulação</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="tubulacao-agua" value="" >
</div>
<a name="sd3.2" id="sd3.2"></a>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">3.2 - Outros</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="tubulacao-outros" value="" >
</div>
</div>
<a name="sd4.0" id="sd4.0"></a>
</div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="" data-label="outros">
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">4.0 OUTROS SERVIÇOS</strong>
<div class="form-row col-md-12 ">
<label for="" style="color:red;"></label>
<div class="form-group col-md-2 ">
<label for="" style="color:red;">4.1 - Rede Elétrica</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="eletrica-outros" value="" >
</div>
<a name="sd4.2" id="sd4.2"></a>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">4.2 - Calçada</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="calcada-outros" value="" >
</div>
<a name="sd4.3" id="sd4.3"></a>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">4.3 - Grama</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="grama-outros" value="" >
</div>
<a name="sd4.4" id="sd4.4"></a>
</div>
<div class="form-row col-md-12 ">
<div class="form-group col-md-2 ">
<label for="" style="color:red;">4.4 - Rampas</label>
</div>
<div class="form-group col-md-10 ">
<input type="text" class="form-control" name="" id="rampas-outros" value="" >
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-1 "></div>
<div class="form-group col-md-1 "></div>
<div class="form-group col-md-12 contorno">
<a name="obs_geral" id="obs_geral"></a>
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">Observações Gerais</strong>
<div class="form-row col-md-12 ">
<textarea type="text" class="form-control" name="txt_observacao" id="" rows="3" required ></textarea>
</div>
<a name="analise" id="analise"></a>
</div>
<div class="form-group col-md-12 contorno">
<strong style="font-size:15px">Análise do Engenheiro</strong>
<div class="form-row col-md-12 ">
<textarea type="text" class="form-control" name="txt_observacao" id="" rows="3" required ></textarea>
</div>
</div>
</div>
<div class="form-group col-md-1 "></div>
<button type="submit" name="incluir" id="incluir" class="btn button5 col-md-12">Salvar</button>
</div>
</div>
</div>
</div>
</form>
</div>
checkedBtnRecapAsfaltico();
function checkedBtnRecapAsfaltico(){
var $activeBtn2 = document.getElementById('btn-ativa2');
var $buracos = document.getElementById('buracos');
var $limpeza = document.getElementById('limpeza');
var $arvores = document.getElementById('arvores');
var $recapeamento = document.getElementById('recapeamento');
var $recAsfObsContrTecn = document.getElementById('rec-asf-obs-contr-tecn');
var $recAsfObs = document.getElementById('rec-asf-obs');
if ($activeBtn2.checked) {$buracos.required = true;}
else{$buracos.required = false;}
if ($activeBtn2.checked) {$limpeza.required = true;}
else{$limpeza.required = false;}
if ($activeBtn2.checked) {$arvores.required = true;}
else{$arvores.required = false;}
if ($activeBtn2.checked) {$recapeamento.required = true;}
else{$recapeamento.required = false;}
if ($activeBtn2.checked) {$recAsfObsContrTecn.required = true;}
else{$recAsfObsContrTecn.required = false;}
if ($activeBtn2.checked) {$recAsfObs.required = true;}
else{$recAsfObs.required = false;}
}
drenagem();
function drenagem(){
var $activeBtn3 = document.getElementById('btn-ativa3');
var $tubulacao = document.getElementById('tubulacao');
var $pocosVisita = document.getElementById('pocos-visita');
var $bocaLobo = document.getElementById('boca-lobo');
var $alasDissipadores = document.getElementById('alas-dissipadores');
var $drenagemOutros = document.getElementById('drenagem-outros');
if ($activeBtn3.checked) {$tubulacao.required = true;}
else{$tubulacao.required = false;}
if ($activeBtn3.checked) {$pocosVisita.required = true;}
else{$pocosVisita.required = false;}
if ($activeBtn3.checked) {$bocaLobo.required = true;}
else{$bocaLobo.required = false;}
if ($activeBtn3.checked) {$alasDissipadores.required = true;}
else{$alasDissipadores.required = false;}
if ($activeBtn3.checked) {$drenagemOutros.required = true;}
else{$drenagemOutros.required = false;}
}
$('#segmento input[type="checkbox"]').change(function() {
let name = this.value;
$('[data-label=' + name + ']').css('display', this.checked ? '' : 'none');
});
Correct answer by bruno henrique on January 17, 2021
Usando javascript mesmo
if(...) {
$("#seu-campo-id").removeAttr('required');
} else {
$("#seu-campo-id").attr({required: 'required'});
}
Answered by Bruno Melo de Souza on January 17, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP