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

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>