javascript - jQuery click evt 正在取消验证脚本

Question

我还在学习 jQuery 和 JS。此代码允许 div .causeBox.step2将输入从未选中状态切换为选中状态:

  var extendcheck = function(evt) { 
  if (evt.target.type !== 'checkbox') {
       var $checkbox = $(":checkbox", this);
       $checkbox.attr('checked', !$checkbox.attr('checked'));
       evt.stopPropagation();
       return false;
  }
  };
  $('.causeBox.step2').click(extendcheck);

但是，当我添加该代码时，它破坏了与我一起工作的其他人编写的表单验证:

function checkAll() {
    if($("input[type=checkbox]:checked").length >= 1) {
      $("input:submit:not([class='ready'])").removeAttr("disabled");
      $("input:submit:not([class='ready'])").addClass("ready");
    } else {
      $("input:submit").removeClass("ready");
      $("input:submit:not([class='ready'])").attr("disabled", "disabled");
    }
  }
  $('input[type=checkbox]').on('change', function(e) {
    checkAll();
  }); 
  $(document).ready(function() {
    checkAll();
  });

有人可以指出导致这两者冲突的原因(控制台中没有错误)，以便我可以修改我添加的代码而不破坏现有的 checkAll()功能？

更新:添加了相关 HTML。我只包含了完整的 .causeBox.step2 之一divs 来削减长度。

<form class="edit_guest_user" id="edit_guest_user_224" action="/guest_users/224" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="+rNXqFJC7Iq+EmDLlMuYfUVAlYro3NZ8qIlg3+jBQOfMR8V81pMMgJpgG9hWb8wyhVcVHE07tWq7BgDLhjcHrg==">

        <div class="hero onboarding">
          <h1>test, what are you passionate about?</h1>
          <p>You can select as many Cause Portfolios as you like.</p>
        </div>

        <div class="causeContainer">
            <div class="causeBox step2">
              <input type="checkbox" name="guest_user[cause_ids][]" id="344668625" value="344668625">
              <span class="newCheck"></span>
              <label for="344668625" class="newCheck"></label>
              <div class="causeInterior">
                <img src="/assets/causes/inequality_icon-b8c54c95ed86c24b471f00c30d2ac98f23a9ede8dfac1f7ea5c9614f770addae.png" alt="Inequality icon">
                <h2><label for="344668625">Inequality</label></h2>
                <div class="button passion-detail">
                  <a id="modal-opener" href="#modal-344668625" rel="modal:open">Learn More</a>
                </div>
              </div>
            </div>

            <div id="modal-344668625" class="modal">

              <div class="modal-header long">
                <h2>Partner Charities in This Portfolio</h2>
              </div>
              <div class="modal-content">

                  <div class="charity-container">

                    <img class="charityLogo" src="/Youthlinc/Youthlinc+TRANS.png" alt="Youthlinc+trans">

                    <div class="charity-info">
                      <h2>Youthlinc</h2>
                      <p>Creating lifetime humanitarians since 1999.</p>
                    </div>

                  </div>

                <div class="button more">
                  <a href="#close-modal" rel="modal:close">Ok</a>
                </div>

              </div>

            </div>

        <input type="hidden" name="next_step" id="next_step" value="salary">

        <div>
          <input type="submit" name="commit" value="" data-disable-with="" class="" disabled="disabled">
        </div>

    </form>

Answer 1

如果您重新组织代码并删除不正确的函数调用，您的代码就可以正常工作。

您不应该在 document.ready 中调用 checkAll()，因为用户此时尚未执行任何操作。

您不应该将对 checkAll() 的调用包装在匿名函数中，因为该调用不会传递任何参数。

return false 不会破坏您的代码，但它不会为您做任何事情。

另外，正如我在评论中提到的。如果您想获得相反的 bool 值，则应该使用 checked 属性，而不是 checked 属性(没有 bool 值来获取相反值)。

$('input[type=checkbox]').on("change", checkAll); 
$('.causeBox.step2').on("click", extendcheck);

function extendcheck(evt) { 
  if (evt.target.type !== 'checkbox') {
     var $checkbox = $(":checkbox", this);
     $checkbox.prop('checked', !$checkbox.prop('checked'));
     evt.stopPropagation(); 
  }
};

function checkAll() {
  if($("input[type=checkbox]:checked").length >= 1) {
    $("input:submit:not([class='ready'])").removeAttr("disabled");
    $("input:submit:not([class='ready'])").addClass("ready");
  } else {
    $("input:submit").removeClass("ready");
    $("input:submit:not([class='ready'])").attr("disabled", "disabled");
  }
}

.ready {
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="edit_guest_user" id="edit_guest_user_224" action="/guest_users/224" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="+rNXqFJC7Iq+EmDLlMuYfUVAlYro3NZ8qIlg3+jBQOfMR8V81pMMgJpgG9hWb8wyhVcVHE07tWq7BgDLhjcHrg==">

        <div class="hero onboarding">
          <h1>test, what are you passionate about?</h1>
          <p>You can select as many Cause Portfolios as you like.</p>
        </div>

        <div class="causeContainer">
            <div class="causeBox step2">
              <input type="checkbox" name="guest_user[cause_ids][]" id="344668625" value="344668625">
              <span class="newCheck"></span>
              <label for="344668625" class="newCheck"></label>
              <div class="causeInterior">
                <img src="/assets/causes/inequality_icon-b8c54c95ed86c24b471f00c30d2ac98f23a9ede8dfac1f7ea5c9614f770addae.png" alt="Inequality icon">
                <h2><label for="344668625">Inequality</label></h2>
                <div class="button passion-detail">
                  <a id="modal-opener" href="#modal-344668625" rel="modal:open">Learn More</a>
                </div>
              </div>
            </div>

            <div id="modal-344668625" class="modal">

              <div class="modal-header long">
                <h2>Partner Charities in This Portfolio</h2>
              </div>
              <div class="modal-content">

                  <div class="charity-container">

                    <img class="charityLogo" src="/Youthlinc/Youthlinc+TRANS.png" alt="Youthlinc+trans">

                    <div class="charity-info">
                      <h2>Youthlinc</h2>
                      <p>Creating lifetime humanitarians since 1999.</p>
                    </div>

                  </div>

                <div class="button more">
                  <a href="#close-modal" rel="modal:close">Ok</a>
                </div>

              </div>

            </div>

        <input type="hidden" name="next_step" id="next_step" value="salary">

        <div>
          <input type="submit" name="commit" value="" data-disable-with="" class="" disabled="disabled">
        </div>

    </form>