如何添加“必填”复选框

How to add a "required" checkbox in this code

本文关键字：必填 复选框 添加 何添加      更新时间：2023-09-26

在这段代码中我想要一个复选框。只有当复选框被选中时，才有可能按下上传/或允许上传。

你能给我提示一下怎样才能改变这一点吗?实际上我可以插入一个复选框，但如果复选框未选中，它总是在上传。

@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"
}
相关文章：