Tenho um formulário onde eu seleciono cores para a página, e nele há um checkbox com a opção de usar padrão do site
, no momento que clico nesse checkbox ele remove o campo, mas quando eu desmarcar o checkbox
ele deveria criar o campo novamente.
Como faria isso?
<div class="form-group row">
{{ Form::label('metadata', 'Título', ['class' => 'col-sm-2 col-form-label']) }}
<div class="col-sm-10">
{{ Form::text('title', null, ['class' => 'form-control', 'placeholder' => 'Digite um Titulo','required' => true]) }}
</div>
</div>
<div class="form-group row">
{{ Form::label('metadata', 'Sub-título', ['class' => 'col-sm-2 col-form-label']) }}
<div class="col-sm-10">
{{ Form::text('subtitle', null, ['class' => 'form-control', 'placeholder' => 'Digite um Sub-Titulo']) }}
</div>
</div>
<div class="form-group row">
<label for="metadata" class="col-sm-2 col-form-label">Cor de fundo:</label>
<div class="col-sm-10">
<input name="" type="checkbox" value="background" onclick="enableColorsBackground(this.checked)"> Usar Padrão do
site
<input type="color" name="background" id="background">
</div>
</div>
<div class="form-group row">
{{ Form::label('metadata', 'Cor do título:', ['class' => 'col-sm-2 col-form-label']) }}
<div class="col-sm-6">
<input name="" type="checkbox" value="color-title" onclick="enableColorsTitle(this.checked)"> Usar Padrão do
site
<input type="color" name="color-title" id="color-title">
</div>
</div>
<script>
function enableColorsBackground() {
document.getElementById('background').remove() ;
}
function enableColorsTitle() {
document.getElementById('color-title').remove();
}
</script>