在这段代码中我想要一个复选框。只有当复选框被选中时,才有可能按下上传/或允许上传。
你能给我提示一下怎样才能改变这一点吗?实际上我可以插入一个复选框,但如果复选框未选中,它总是在上传。
@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>
您可以使用JavaScript使用onchangeevent事件来基于选中值启用/禁用按钮
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />
你可以根据复选框的选择使用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
添加一个复选框
<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>
试试这个:
添加到你的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"
}