このコードに「必須」チェックボックスを追加する方法

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

あなたがに応じて、jQueryを使ってボタンを無効にして有効にすることができますがチェック値

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

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

Answer 2

に基づいて/無効]ボタンを有効にするonchangeeventイベントを使用して、JavaScriptでこれを行うことができますチェックボックスの選択。

お持ちの場合：あなたのjQueryで次に

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

：

$("#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>