如何在此代码中添加“必需”复选框

Question

I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.

Could you give me a hint how it's possible to change this? Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.

@extends('master/index')
@section('custom')
<!-- Main page -->

<div id="content-wrapper" class="snap-content">
    <!-- Progress bar -->
    <div class="container progress-holder">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="progress-rate">--%</div>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                        <span class="sr-only">--% Complete</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Drag zone -->
    @if($limitReached == true)
    <div class="container text-center start-zone">
        <p>{{ t('You have reached daily upload limit') }}</p>
    </div>
    @else
    <div class="container text-center start-zone">
        <form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
            <input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
            <p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
            <div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
            <p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
        </form>
    </div>
    @endif

    <div class="uploader block-hide">
        <!-- Preview zone -->
        <div class="container preview-zone">
            <img src="{{ asset('static/img/mask-tran.png') }}"/>
        </div>

        <!-- Thumbnail zone -->
        <div class="container thumbnail-zone">
            <div class="row">
                <div class="col-md-9">
                    <ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
                </div>

                <div class="actions col-md-3 text-right">
                    <button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
                    <button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
                    <p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
                </div>
            </div>
        </div>

        <!-- Edit zone -->
        <div class="container-fluid tab-content edit-zone-holder"></div>

    </div>
</div>

</div>

Answer 1

You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value

<input type="checkbox"  onchange="document.getElementById('uploadButton').disabled = !this.checked;" />

<input type="submit" id="uploadButton" value=" Upload " />