时间戳

首页 > 解决方案 > 仅在检查所有必需的框时，才允许从按钮打印清单

javascript - 仅在检查所有必需的框时，才允许从按钮打印清单

问题描述

我有一份清单供我的客户打印。底部是一个按钮，允许他们打印清单。除非选中所有必需的复选框，否则我怎样才能使清单不会打印？

目前我有三个必须填写的文本输入，并会自动选中第一个必需的框。但是我如何锁定打印清单按钮以检查复选框是否被选中，以便让用户从按钮打印。

我知道这不会阻止用户只是 cntrl "p"ing 但如果有办法完全阻止他们这样做，我也会对此感兴趣。

// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
  let count = 0; // Keep track of how many are filled in

  // Loop over all the text fields
  $('.form-control:not("#BusinessName")').each(function(idx, el) {
    // If the field is not empty....
    if (el.value !== "") {
      count++; // Increase the count
    }
  });
  console.log(count);
  // Test to see if all 3 are filled in
  if (count === 3) {
    $("#contactinformation").prop("checked", true); // Check the box
  } else {
    $("#contactinformation").prop("checked", false); // Unheck the box
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactName">Contact name:</label>
      <input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="BusinessName">Business name:</label>
      <input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactEmail">Email address:</label>
      <input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactPhone">Phone number (business hours):</label>
      <input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
    </div>
  </div>
</div>

<div class="headline">
  <h2>Checklist</h2>
</div>

<p><strong>Check applicable boxes, print and send in with paperwork.</strong></p>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="contactinformation" id="contactinformation" disabled /> Contact information
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="feesbreakdown" id="feesbreakdown" /> Estimate of fees - <a href="forms/FeesBreakdown.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="money" id="money" /> Check or money order
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="certificatetitle" id="certificatetitle" /> Application for Certificate of Title - <a href="forms/82040PDFCreator.cfm" target="_blank"><span class="noprint">Form HSMV 82040</span></a>
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofidentification" id="proofidentification" /> Identification document
      <font color="red">*Required</font>
      <cfinclude template="../../../includes/proofidentificationtip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="poa" id="poa" /> Power of attorney document - <a href="forms/poa.cfm" target="_blank"><span class="noprint">Form HSMV 82053</span></a>
      <cfinclude template="../../../includes/poatip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="title" id="title" /> Proof of ownership document
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.ownership")>
  <cfif session.checkout.vehicle.ownership is "OOS Title">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <input type="checkbox" name="vinverification" id="vinverification" /> VIN Verification - <a href="forms/vinverification.cfm" target="_blank"><span class="noprint">Form HSMV 82042</span></a>
          <font color="red">*Required</font>
        </div>
      </div>
    </div>
  </cfif>
</cfif>


<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="billofsale" id="billofsale" /> Itemized dealer invoice, purchase order or Bill of Sale - <a href="forms/Billofsalevehicle.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="leaseagreement" id="leaseagreement" /> Lease agreement
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="insuranceaffidavit" id="insuranceaffidavit" /> Florida Insurance card, policy, binder or Florida Insurance Affidavit - <a href="forms/InsuranceAffidavit.cfm" target="_blank"><span class="noprint">Form HSMV 83330</span></a>
      <font color="red">*Required</font>
      <!---<cfinclude template="../../../includes/proofinsurancetip.cfm">--->
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.transferring_vehicle_license")>
  <cfif session.checkout.vehicle.transferring_vehicle_license is "Current">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <input type="checkbox" name="currentregistration" id="currentregistration" /> Proof of existing registration or license plate to transfer
        </div>
      </div>
    </div>
  </cfif>
</cfif>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofresidency" id="proofresidency" /> Proof of Manatee County Residency document
      <cfinclude template="../../../includes/proofresidencytip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      *For a list of all other forms not listed above that may be applicable - <a href="" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<form method="post">

  <br>
  <div>
    <button class="btn-u btn-u-orange" onclick="window.print(); return false;" name="printpage" id="printpage"><strong class="icon-printer"></strong> Print Checklist</button>
    <button class="btn-u" type="submit" name="submit" id="submit"><strong class="icon-home"></strong> Finished</button>
  </div>

对此的任何帮助或建议将不胜感激！

标签： javascriptjquery

解决方案

首先，为了便于识别，我们在必需的复选框中添加了一个“必需”类。

其次，对于每个必需的复选框，我们添加一个事件侦听器。触发后，我们将检查并更新按钮的disabled属性。请注意，最好使用input事件而不是blur事件。

由于我对jquery不熟悉，所以我使用了js标准方法，但它们似乎大多是一对一的翻译。

// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
  let count = 0; // Keep track of how many are filled in

  // Loop over all the text fields
  $('.form-control:not("#BusinessName")').each(function(idx, el) {
    // If the field is not empty....
    if (el.value !== "") {
      count++; // Increase the count
    }
  });
  console.log(count);
  // Test to see if all 3 are filled in
  if (count === 3) {
    $("#contactinformation").prop("checked", true); // Check the box
  } else {
    $("#contactinformation").prop("checked", false); // Unheck the box
  }
  
  checkCheckboxes();
});

let checkboxes = [...document.querySelectorAll('input[type=checkbox].required')];
let checkCheckboxes = () => document.querySelector('#printpage').disabled = checkboxes.some(check => !check.checked);
checkboxes.forEach(check => check.addEventListener('input',  checkCheckboxes));
checkCheckboxes();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactName">Contact name:</label>
      <input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value=""/>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="BusinessName">Business name:</label>
      <input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value=""/>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactEmail">Email address:</label>
      <input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value=""/>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactPhone">Phone number (business hours):</label>
      <input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value=""/>
    </div>
  </div>
</div>

<div class="headline">
  <h2>Checklist</h2>
</div>

<p><strong>Check applicable boxes, print and send in with paperwork.</strong></p>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="contactinformation" id="contactinformation" class="required" disabled/> Contact information
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="feesbreakdown" id="feesbreakdown"/> Estimate of fees - <a href="forms/FeesBreakdown.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="money" id="money"/> Check or money order
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="certificatetitle" id="certificatetitle" class="required"/> Application for Certificate of Title - <a href="forms/82040PDFCreator.cfm" target="_blank"><span class="noprint">Form HSMV 82040</span></a>
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofidentification" id="proofidentification" class="required"/> Identification document
      <font color="red">*Required</font>
      <cfinclude template="../../../includes/proofidentificationtip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="poa" id="poa"/> Power of attorney document - <a href="forms/poa.cfm" target="_blank"><span class="noprint">Form HSMV 82053</span></a>
      <cfinclude template="../../../includes/poatip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="title" id="title"/> Proof of ownership document
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.ownership")>
<cfif session.checkout.vehicle.ownership is "OOS Title">
<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="vinverification" id="vinverification" class="required"/> VIN Verification - <a href="forms/vinverification.cfm" target="_blank"><span class="noprint">Form HSMV 82042</span></a>
      <font color="red">*Required</font>
    </div>
  </div>
</div>
</cfif>
</cfif>


<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="billofsale" id="billofsale"/> Itemized dealer invoice, purchase order or Bill of Sale - <a href="forms/Billofsalevehicle.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="leaseagreement" id="leaseagreement" class="required"/> Lease agreement
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="insuranceaffidavit" id="insuranceaffidavit" class="required"/> Florida Insurance card, policy, binder or Florida Insurance Affidavit - <a href="forms/InsuranceAffidavit.cfm" target="_blank"><span class="noprint">Form HSMV 83330</span></a>
      <font color="red">*Required</font>
      <!---<cfinclude template="../../../includes/proofinsurancetip.cfm">--->
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.transferring_vehicle_license")>
<cfif session.checkout.vehicle.transferring_vehicle_license is "Current">
<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="currentregistration" id="currentregistration"/> Proof of existing registration or license plate to transfer
    </div>
  </div>
</div>
</cfif>
</cfif>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofresidency" id="proofresidency"/> Proof of Manatee County Residency document
      <cfinclude template="../../../includes/proofresidencytip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      *For a list of all other forms not listed above that may be applicable - <a href="" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>


<form method="post">

  <br>
  <div>
    <button class="btn-u btn-u-orange" onclick="window.print(); return false;" name="printpage" id="printpage"><strong class="icon-printer"></strong> Print Checklist</button>
    <button class="btn-u" type="submit" name="submit" id="submit"><strong class="icon-home"></strong> Finished</button>
  </div>

推荐阅读