Question

我想要一个此代码中的复选框。只有选中该复选框，才能按上传/或允许上传。

你能否给我一个暗示如何改变它？实际上我可以插入一个复选框，但如果取消选中该复选框，则会一直上传。

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

Answer 1

您可以使用onchangeevent事件使用JavaScript来执行此操作，以根据选中的值启用/禁用按钮

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

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

Answer 2

您可以根据复选框选择禁用和启用jQuery按钮。

如果你有：

<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>

然后在你的jQuery中：

$("#upload").prop('disabled', true);

$("#checkbox").bind('change', function(){        
        var checked = this.checked;
        if(checked){
            $("#upload").prop('disabled', false);
        } else {
            $("#upload").prop('disabled', true);
        }
});

JSFiddle

Answer 3

试试这个：

在你的html表单中添加它。

<input type="checkbox" name="writeSomeName" value="value">

之后再编写一些php代码：

if ($_POST['writeSomeName'] == 'value')
{
     //Add code for upload file here
}
else
{
  echo "You have not checked the checkbox. Please make it check first"
}

Answer 4

添加一个复选框

<input type="checkbox" name="chk" id="chk" value="yourvalue">

在上传按钮中添加onclick事件

<button type="button" onclick="selected()">upload</button>

<script>
function selected()
{
   if(document.getElementById('chk').checked) {
    document.getElementById("fileupload").submit();
   } else {
    alert('YOUR CUSTOM MESSAGE');
  }
}
</script>

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

4 个答案: