I have a code block that only appears after a checkbox is checked, but this block is inside a foreach, it will be repeated more than once. the first one works when I click the checkbox, the second repetition no longer works. how can I solve?
<div class="col-md-12 form-group mb-3" id="2">Adicionar 2ª cor <input type="checkbox" id="isChecked_3"/></div>
<div id="cor4" style="display:none;">
<div class="col-md-12 form-group mb-3">
<label for="sel5"><h6>Selecionar Cor 2:<h6></label>
<select class="form-control" id="sel5" name="{{ $proposedphase->id_proposedphase.'arm_color_2'}}">
<option value="0">Selecionar Cor</option>
@foreach ($colors as $color)
<option value="{{ $color->id_color }}">{{ $color->name }}</option>
@endforeach
</select>
</div>
<script>
$(document).ready(function(){
$('#isChecked_3').change(function(){
if($(this).prop('checked')){
$('#cor4').show();
} else {
$('#cor4').hide();
}
});
});
</script>
$(document).ready
only fires once when the document is ready. – noob Jan 13 at 22:17$document.ready()
only fires once, but it's setting up achange
event handler that should fire every time there's a change on the selected element. – Tangentially Perpendicular Jan 13 at 22:26