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没有破坏您的代码，但没有为您做任何事情。

，正如我在评论中提到的那样。您应该使用checked 属性如果要使其布尔值相反，而不是checked 属性（哪个没有布尔值来获得相反的价值。

$('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>