禁用按钮时添加警告

Question

我有此代码：

// 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); // Uncheck 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();

$(document).on('click', '#printpage', function() {
  alert('clicked');
if ($("#printpage").is(":disabled")) {
   alert("Disabled");
 } else {
   alert("enabled");
 }
});

<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>

当document.querySelector('#printpage').disabled的“打印页面”按钮被禁用时，我试图添加一条警告消息，告诉用户检查必填字段。

我可以在哪里添加警告。可见？

任何帮助将不胜感激。

我试图添加一个onclick处理程序。单击并禁用“打印页”按钮时，“打印页”按钮不显示警报，但是一旦启用该按钮，它便显示已启用。如果某个按钮被禁用，它将不会发送警报？

Answer 1

您在这里有很多代码。提供最小的解决方案总是更好。 我试图为您建立一个最小的解决方案。

我只是CSS，JavaScript只是为了阐明其工作原理。

var buttons = document.querySelectorAll(".btn");

document.getElementById("toggle-disabled").addEventListener("click", function(e){
  for(let i = 0; i < buttons.length; i++){
    buttons[i].toggleAttribute("disabled");
  }
});

.btn-disabled-warning {
  display: none;
}

.btn[disabled] + .btn-disabled-warning {
  color: red;
  display: block;
}

<div>
  <button class="btn" disabled>My Button</button>
  <p class="btn-disabled-warning">The button is disabled :-(</p>
<div>
  
<div>
  <button class="btn">My Button</button>
  <p class="btn-disabled-warning">The button is disabled :-(</p>
<div>
  
<button id="toggle-disabled">Toggle disabled</button>