Javascript函数在使用div类名而不是div id时是否计数？

Question

我有一个包含3个复选框的列表，它使用javascript在启用apply按钮之前验证所有3个复选框是否都已选中。我目前正在使用以下函数来检查.qualify-point的类名计数。但是，我需要使用ID，如#qualify-point。然而，当我在isAllChecked中做这个更改时，它只会计数到1。我做错了什么？

const $applyButton = $("#qualify-apply__button");
const $checkBoxes = $(".qualify-point input:checkbox");

$(document).ready(function() {
    $applyButton.attr("disabled", true);
    $applyButton.click(apply);
    $checkBoxes.change(checkIfCanApply);
    $applyButtonSidebar.attr("disabled", true);
});

function isAllChecked() {
  console.log($(".qualify-point input:checkbox:checked").length, "count")
  return $(".qualify-point input:checkbox:checked").length === 3;
}

function checkIfCanApply () {
    if(isAllChecked()) {
        $applyButton.attr("disabled", false);
    } else {
        $applyButton.attr("disabled", true);
    }
}

function apply(e) {
    e.preventDefault();
    if(isAllChecked()) {
        localStorage.setItem("initial_application_data", JSON.stringify({ loan: { do_you_qualify: true } }));
        window.location = "/apply";
    }
    return;
}

这是HTML

<div class="qualify-list__wrapper">
                    <div class="qualify-point" id="qualify-point">
                      <span class="qualify-point__label">Min 6 months in business</span>
                      <div class="checkbox-white-bg">
                        <input id="checkbox-1" class="checkbox-white-bg__input" checked="checked" name="checkbox-1" type="checkbox">
                        <label aria-label="minimum 6 months" tabindex="0" for="checkbox-1"
                          class="checkbox__label"></label>
                      </div>
                    </div>
                    <div class="qualify-point" id="qualify-point">
                      <span class="qualify-point__label">Active ABN or ACN</span>
                      <div class="checkbox-white-bg">
                        <input id="checkbox-2" class="checkbox-white-bg__input" name="checkbox-2" type="checkbox">
                        <label aria-label="active abn checkbox" tabindex="0" for="checkbox-2"
                          class="checkbox__label"></label>
                      </div>
                    </div>
                    <div class="qualify-point" id="qualify-point">
                      <span class="qualify-point__label">Min $5,000 monthly revenue</span>
                      <div class="checkbox-white-bg">
                        <input id="checkbox-3" class="checkbox-white-bg__input" name="checkbox-3" type="checkbox">
                        <label aria-label="min $5000 monthly checkbox" tabindex="0" for="checkbox-3"
                          class="checkbox__label"></label>
                      </div>
                    </div>
                    <div class="qualify-apply">
                      <button id="qualify-apply__button" class="button"
                        disabled="true">
                        <span>Apply Now</span>
                      </button>
                    </div>
                  </div>

Answer 1

在我的测试环境中，我发现$applyButtonSidebar.attr("disabled", true);在$applyButtonSidebar上抛出了未定义的异常。在注释掉它之后，我能够得到一个计数到3，并且按钮被激活。

​

​

​

​