1

尝试搜索特定数量的类“.good”，如果没有找到禁用按钮，如果发现该数量删除禁用。不能完全到达那里并工作。

    $("fieldset.first").children().find('.good')[4](function(){
    // or maybe -- $('fieldset:first-of-type').children('.good).length !== 4?
      $('.next').removeAttr('disabled');
    }else{
      $('.next').prop('disabled', true);
    }

或者，如果有更好的方法，我会全神贯注。

更新

http://jsfiddle.net/darcher/aUKhN/27/

这是验证的工作方式：

<!-- when page loads -->
<div class="item"><input required></div>

<!-- if it doesn't validate -->
<div class="item bad">
  <input required>
  <div class="alert">why it isn't validating</div>
</div>

<!--  and if it does validate it changes to -->
<div class="item good"><input required></div>

添加了 HTML

    <fieldset class="first">
  <legend>Create your login credentials</legend>
  <div class="item">
    <label>
      <span>Email Address</span>
      <input type="email" name="username" placeholder="e.g. name@email.com" required>
    </label>
    <div class="tooltip help">
      <span>?</span>
      <div class="help-content">
        <b></b>
        <p>You will use your email address to login to your WiseBanyan account</p>
      </div>
    </div>
  </div>
  <div class="item">
    <label>
      <span>Confirm email</span>
      <input type="email" name="confirmUsername" data-validate-linked="username" placeholder="e.g. name@email.com" autocomplete="off" required>
    </label>
  </div>
  <div class="item">
    <label>
      <span>Password</span>
      <input type="password" name="password" data-validate-length-range="8" minlength="8" autocomplete="off" required>
    </label>
    <div class="tooltip help">
      <span>?</span>
      <div class="help-content">
        <b></b>
        <p>Minimum of 8 characters.</p>
        <p>Must contain at least one uppercase letter and one number or symbol.</p>
      </div>
    </div>
  </div>
  <div class="item">
    <label>
      <span>Confirm password</span>
      <input type="password" name="confirmPassword"  data-validate-length-range="8" minlength="8" data-validate-linked="password" required>
    </label>
  </div>
<div class="details">
  <strong>Information</strong>
  <p>Type in the login information you would like. Hover over the &nbsp;<span class="ques">?</span> for further information on restrictions.</p>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" disabled>
<input type="button" name="next" class="next action-button" value="Next">

4

2 回答 2

2

尝试

  $('.next').prop('disabled', $("fieldset.first").find('.good').length < 4);

不要混合removeAttr和支撑。相反，只需使用prop它自己。您正在find对孩子使用，而不是您可以仅find('.good')在父母上使用，除非您想特别避免找到任何.good直接在下面的$("fieldset.first")

由于您需要查看每个字段集并禁用相应的按钮，请执行以下操作：

$('fieldset').find('.next').prop('disabled', function () { //give the common class for fieldset if needed
    return $(this).closest('fieldset').find('.good').length < 4;
});
于 2013-10-16T14:07:36.647 回答
1

试试这个：

function enabler() {
    var v = this.value;
    var good = $("fieldset").find('.good');
    console.log(good.length);
    if (good.length > 2) {
        // or maybe -- $('fieldset:first-of-type').children('.good).length !== 4?
        $('.next').prop('disabled', false);
    } else {
        $('.next').prop('disabled', true);
    }
}
enabler();
$('input[required]').not('.unused').keyup(function(){setTimeout(enabler,500)}).change();

小提琴

编辑：

我认为您的部分问题是验证器在此代码之后广告了一个类$("fieldset").find('.good');。如果我添加 500 毫秒的延迟，它会起作用……所以保持延迟，或者enabler();在验证器中添加函数调用。

于 2013-10-16T14:05:02.620 回答