Enable input type="file" when input type="checkbox" == true

Question

I’m having a hard time doing something that apparently should be very simple, I need a file type input to be disabled/invisible until the user marks a checkbox type input that by default will be disabled.

Here is my attempt:

function HabilitarUpload(Opcao1, UploadOpcao1) 
{
    document.getElementById(UploadOpcao1).disabled = !Opcao1.checked;
}

<label class="container">OPÇÃO 1
    <input type="checkbox" id="Opcao1" onclick="HabilitarUpload(Opcao1, UploadOpcao1);">
    <span class="checkmark"></span>
</label>
<p>TEXTO UPLOAD OPÇÃO 1
    <input type="file" name="img" id="UploadOpcao1" disabled="true">
</p>

I would also like to know if/how I could make the text that comes before the file type input (TEXT UPLOAD OPTION 1) appear only when the checkbox is checked.

Answer 1

From what I understand you want to hide this input file. For this you can use the attribute hidden. Without wanting to change your code too much in its form just add or remove the attribute hidden when checked or not respectively.

See working at the bottom:

function HabilitarUpload() 
{
    if (document.getElementById('Opcao1').checked) 
    {
        document.getElementById('upload1').removeAttribute("hidden");
    } 
    else 
    {
        document.getElementById('upload1').setAttribute("hidden", "true");
    }
}

<label class="container">OPÇÃO 1
    <input type="checkbox" id="Opcao1" onclick="HabilitarUpload();">
    <span class="checkmark"></span>
</label>
<p id="upload1" hidden="true">TEXTO UPLOAD OPÇÃO 1
    <input type="file" name="img" id="UploadOpcao1">
</p>

PS: Note that you have there many problems. Tags label and p should not be used to group other tags. For this purpose you should use the tag div.

Answer 2

The example below can help you solve your problem, if it’s just an input you want to show.

const option1 = document.getElementById('Opcao1'); // Seleciona o checkbox
let UploadOpcao1 = document.querySelector('.UploadOpcao1'); // A div com o input

// Adiciona o evento de click
option1.addEventListener('click', function(e){

    // Verifica se o checkbox foi selecionado
    const isActive = e.target.checked

    // Mostra o input de upload
    UploadOpcao1.style.display = 'block';
})

     <label class="container">OPÇÃO 1
        <input type="checkbox" id="Opcao1">
    </label>

    <p style="display: none" class="UploadOpcao1">TEXTO UPLOAD OPÇÃO 1
        <input type="file" name="img" disabled="true">
    </p>

Answer 3

A little simpler:

function clique() {
  var e = document.getElementById("imagem");
  e.removeAttribute("disabled");
}

<p>Checkbox: <input type="checkbox" name="check" onclick="clique()"></p>
<p>Imagem: <input id="imagem" type="file" name="imagem" disabled="disabled"></p>

Note that this code only enables the input field when the checkbox is clicked. If you need to disable it again if the checkbox is clean, you need to adapt it.

Answer 4

You can check the event of change using jQuery for whenever the checkbox changes from " state, "it enables or disables the input. This way:

$(document).ready(function() {
        $("#Opcao1").on('change', function(){
            if($(this).is(':checked')) {
                $("#UploadOpcao1").prop('disabled', false);
            } else {
                $("#UploadOpcao1").prop('disabled', true);
            }
        })
    })

 <label class="container">OPÇÃO 1
     <input type="checkbox" id="Opcao1">
     <span class="checkmark"></span>
 </label>
 <p>TEXTO UPLOAD OPÇÃO 1
     <input type="file" name="img" id="UploadOpcao1" disabled="true">
 </p>
 <script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>