Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1093706155199737856
correções ortográficas
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Adicionar e Remover campo atravesatravés do CheckBox

Tenho um formulário onde eu seleciono cores para o paginaa 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?

inserir a descrição da imagem aqui

<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>

Adicionar e Remover campo atraves do CheckBox

Tenho um formulário onde eu seleciono cores para o pagina, 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?

inserir a descrição da imagem aqui

<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>

Adicionar e Remover campo através do CheckBox

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?

inserir a descrição da imagem aqui

<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>
Fonte Link
Romulo Sousa
  • 573
  • 2
  • 6
  • 23

Adicionar e Remover campo atraves do CheckBox

Tenho um formulário onde eu seleciono cores para o pagina, 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?

inserir a descrição da imagem aqui

<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>