Question

尝试搜索特定数量的类“.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">

Answer 1

尝试

  $('.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;
});

Answer 2

试试这个：

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();函数调用。

尝试在字段集中查找<div>类的数量，如果为true enable button </div>

2 个答案:

小提琴