禁用按钮时添加警告 [英] Adding warning when button is disabled

问题描述

我有此代码:

// 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禁用打印页面按钮时，我试图添加一条警告消息，告诉用户检查必填字段.

I am trying to add a warning message when document.querySelector('#printpage').disabled the printpage button is disabled to tell the user to check the required fields.

我可以在哪里添加警告.可见?

Where can I add the warning.visible?

任何帮助将不胜感激.

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

I have tried to add an onclick handler. The printpage button does not show the alert when the printpage button is clicked and disabled but it does show enabled once the button is enabled. If a button is disabled it will not send an alert?

推荐答案

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

You've got plenty of code here. It's always better to provide a minimal solution. I tried to build a minimal solution for you.

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

I's CSS only, the Javascript is only for clarification on how it works.

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>

这篇关于禁用按钮时添加警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！