为什么即使在需要的输入为空的情况下，请提交按钮启用？

Question

// Input Variables
let createDigestModal = $("#create-digest-modal");
let createDigestFormContainer = $("#create-digest-modal-form-container");
let createDigestModalSubmitBtn = $("#create-digest-modal-btn");

// ========================================================================
// Toggle the submit button to disabled / enabled based on required inputs
// ========================================================================
const enableSubmitBtn = () => {
  // Create digest form
  $(createDigestFormContainer).on("keyup click", () => {
    let createDigestInputs = createDigestFormContainer.find(".required");
    let requiredCreateDigestInputs = true;

    for (let i = 0; i < createDigestInputs.length; i++) {
      console.log(createDigestInputs[i].value);
      if (createDigestInputs[i].value == "") {
        requiredCreateDigestInputs = false;
      }
    }

    createDigestModalSubmitBtn.prop("disabled", !requiredCreateDigestInputs);
  });
};

// Invoke Function to toggle submit button
enableSubmitBtn();

.row {
  margin-bottom: 1rem;
}

/* Required Fields */

.required-field::after {
  content: "*";
  color: red;
  margin-left: 2px;
}

.required-field-margin-left::after {
  content: "*";
  color: red;
  margin-left: -2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Create Digest Modal -->
<div class="modal fade" id="create-digest-modal" tabindex="-1" aria-labelledby="create-digest-modal-label">

  <form id="create-digest-modal-form-container">
    <!-- Project Input -->
    <div class="row">
      <div class="col-40">
        <label class="required-field" for="create-digest-modal-project-input">Project</label>
      </div>
      <div>
        <select class="form-select required" id="create-digest-modal-project-input" type="select">

          <option value="select">Select</option>
          <option value="1">Project 1</option>
          <option value="2">Project 2</option>
        </select>
      </div>
    </div>
    <!-- /Project Input -->

    <!-- name input -->
    <div class="row">
      <div id="create-digest-name-input">
        <label id="create-digest-modal-name-input-label" for="create-digest-modal-name-input" class="required-field">Digest Name</label>
      </div>

      <div>
        <input name="create-digest-modal-name-input" type="text" id="create-digest-modal-name-input" class="required" />
      </div>
    </div>
    <!-- /name input -->

    <!-- Type input -->
    <div class="row">
      <div class="col-40">
        <label class="required-field" for="create-digest-modal-type-input">Type</label>
      </div>
      <div class="col-75 flex">
        <select class="form-select required" aria-label="create-digest-modal-type-input" id="create-digest-modal-type-input" type="select">
          <option value="select">Select</option>
          <option value="D">Daily</option>
          <option value="W">Weekly</option>
        </select>
      </div>
    </div>
    <!-- /Type input -->

    <!-- include summary input -->
    <div id="create-digest-modal-summary-input-container" class="row">
      <div class="col-40">
        <label class="form-check-label" for="create-digest-modal-summary-input">
          Include Summary
        </label>
      </div>
      <div class="col-75 flex">
        <input checked class="form-check-input" type="checkbox" id="create-digest-modal-summary-input" />
      </div>
    </div>
    <!-- /include summary input -->
  </form>

  <!-- Close/Update Buttons -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary modal-close-btn" data-bs-dismiss="modal" id="create-modal-close-btn">
      Close
    </button>
    <button type="button" id="create-digest-modal-btn" class="btn btn-success" disabled>
      Add Digest
    </button>
  </div>

</div>
<!-- Create Digest Modal -->

当值为

select

时，条件

createDigestInputs[i].value.length == ""

失败。因为您将 有条件

&&

，它们都必须属于禁用按钮，但这是不可能发生的。

Answer 1

than比使用

click

事件，使用

change

检测下拉列表中的更改。

检查空输入值的检查应使用

.value == ""

而不是

.value.length == ""

来完成。后者起作用的唯一原因是，将数字与字符串进行比较会自动将字符串转换为一个数字，而空字符串将其转换为

0

。 找到一个不设置的输入后，您可能会突破

for

循环。

// Input Variables
let createDigestModal = $("#create-digest-modal");
let createDigestFormContainer = $("#create-digest-modal-form-container");
let createDigestModalSubmitBtn = $("#create-digest-modal-btn");

// ========================================================================
// Toggle the submit button to disabled / enabled based on required inputs
// ========================================================================
const enableSubmitBtn = () => {
  // Create digest form
  $(createDigestFormContainer).on("keyup change", () => {
    let createDigestInputs = createDigestFormContainer.find(".required");
    let requiredCreateDigestInputs = true;

    for (let i = 0; i < createDigestInputs.length; i++) {
      console.log(createDigestInputs[i].value);
      if (
        createDigestInputs[i].value == ""
      ) {
        requiredCreateDigestInputs = false;
        break;
      }
    }

    $(createDigestModalSubmitBtn).attr("disabled", !requiredCreateDigestInputs);

  });
};

// Invoke Function to toggle submit button
enableSubmitBtn();

.row {
  margin-bottom: 1rem;
}

/* Required Fields */

.required-field::after {
  content: "*";
  color: red;
  margin-left: 2px;
}

.required-field-margin-left::after {
  content: "*";
  color: red;
  margin-left: -2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Create Digest Modal -->
<div class="modal fade" id="create-digest-modal" tabindex="-1" aria-labelledby="create-digest-modal-label">

  <form id="create-digest-modal-form-container">
    <!-- Project Input -->
    <div class="row">
      <div class="col-40">
        <label class="required-field" for="create-digest-modal-project-input">Project</label>
      </div>
      <div>
        <select class="form-select required" id="create-digest-modal-project-input" type="select">

          <option value="">Select</option>
          <option value="1">Project 1</option>
          <option value="2">Project 2</option>
        </select>
      </div>
    </div>
    <!-- /Project Input -->

    <!-- name input -->
    <div class="row">
      <div id="create-digest-name-input">
        <label id="create-digest-modal-name-input-label" for="create-digest-modal-name-input" class="required-field">Digest Name</label>
      </div>

      <div>
        <input name="create-digest-modal-name-input" type="text" id="create-digest-modal-name-input" class="required" />
      </div>
    </div>
    <!-- /name input -->

    <!-- Type input -->
    <div class="row">
      <div class="col-40">
        <label class="required-field" for="create-digest-modal-type-input">Type</label>
      </div>
      <div class="col-75 flex">
        <select class="form-select required" aria-label="create-digest-modal-type-input" id="create-digest-modal-type-input" type="select">
          <option value="">Select</option>
          <option value="D">Daily</option>
          <option value="W">Weekly</option>
        </select>
      </div>
    </div>
    <!-- /Type input -->

    <!-- include summary input -->
    <div id="create-digest-modal-summary-input-container" class="row">
      <div class="col-40">
        <label class="form-check-label" for="create-digest-modal-summary-input">
          Include Summary
        </label>
      </div>
      <div class="col-75 flex">
        <input checked class="form-check-input" type="checkbox" id="create-digest-modal-summary-input" />
      </div>
    </div>
    <!-- /include summary input -->
  </form>

  <!-- Close/Update Buttons -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary modal-close-btn" data-bs-dismiss="modal" id="create-modal-close-btn">
      Close
    </button>
    <button type="button" id="create-digest-modal-btn" class="btn btn-success" disabled>
      Add Digest
    </button>
  </div>

</div>
<!-- Create Digest Modal -->