0
I already apologize from now on if I can not be clear enough, but I needed to make a form that when they marked certain checkbox, would appear Ivs that would be hidden with the particular content to be filled, So far so good, I was able to find here in Stackoverflow a question that solved this (Show and search fields and according to selected checkbox field?), happens that when clicking on a Ubmit button for me to click on another page to include in the database, the field marked as required even being hidden, they are taken into consideration and the site is waiting to fill them.
I tried to use the . attr() method, but I don’t know if I didn’t use it right, it didn’t work.
I tried to comment on the response of the link I found, but I do not have enough score to comment.
Can someone help me disable required when input is not visible?
$('#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>
You can create an example using https://jsfiddle.net so I can test?
– Leonardo Nakao
Leonardo, I tried to put it there the way I could, I don’t know if it’s right, but it did what I needed.. jsFiddle: https://jsfiddle.net/BrunoEnrrike/d5p08hc2/7/
– Bruno Henrique