javascript - 根据某些条件禁用或启用按钮

Question

在我的应用程序中，我有多个看起来像这样的 div(div 是动态创建的):

<div class="form-group clearfix">
    <div class="form-group first-name">
        <input type="text" id="firstName0" class="signup-input firstName required" name="first[0]" placeholder="">
    </div>
    <div class="form-group last-name">
        <input type="text" id="lastName0" class="signup-input lastName" name="last[0]" placeholder="optional">
    </div>
    <div class="form-group email">
        <input type="text" data-index="0" id="inputMail0" class="signup-input mail" name="email[0]" placeholder="e.g. example@url.com" aria-invalid="true">
        <span class="common-sprite sign-up-cross first"></span>
    </div>
</div>

名称是根据索引动态生成的(例如email[1]、email[2]......)。

我有一个按钮，应该禁用该按钮，以防名字字段不为空并且电子邮件字段为空并且跨度没有disNone 类。

根据上述情况我应该如何禁用该按钮？

Answer 1

如果我理解正确的话，如果满足以下所有条件，您希望禁用该按钮:-

1. 名字字段不为空 - $('#firstName0').val() != ''
2. 电子邮件字段为空 - $('#inputMail0').val() == ''
3. Span 没有 disNone 类 - !$('span').hasClass('disNone')

因此，我将通过将其包装在表单上的 keyup 事件的监听器中来检查该条件:

$('.form-group').on('keyup', function () {
    console.log('keyup');
    if ($('#firstName0').val() !== '' && $('#inputMail0').val() === '' && !$('.email span').hasClass('disNone')) {
        //Now do whatever with your button.
        $('.mybutton').prop('disabled', true);
    } else {
        $('.mybutton').prop('disabled', false);
    }
});

演示:http://jsfiddle.net/ajj87Lg3/