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>

名称是根据索引动态生成的（例如电子邮件[1]，电子邮件[2] .....）。

我有一个按钮，如果名字的字段为not empty且电子邮件is empty的字段且字段不属于disNone，则应禁用该按钮

如何根据上述条件禁用按钮？

Answer 1

希望这个条件适合你。

将jQuery对象存储在变量中并使用这些变量，这是一种更好的方法。

$(function(){

    var firstName = $('#firstName0').val();     
    var inputMail = $('#inputMail0').val();     
    var checkClass = $('span').hasClass('disNone');

    if( firstName!=='' && inputMail==='' && !checkClass ) {
        $('button').attr('disabled','disabled'); //in the fiddle you would see an alert, you just have to replace that code with this one
    }

});

编辑：如果动态生成DIVS，您可以使用each() jquery函数循环播放它们。

$(function(){

$('#mainDiv').children('div').each(function(index,element){
var nameDiv = $(element).find(":nth-child(1)");
var firstName = $(nameDiv).find('input').val();   
var emailDiv =   $(element).find(":nth-child(3)");
var inputMail = $(emailDiv).find('input').val();     
var spanElem = $(emailDiv).find("span");
var checkClass = $(spanElem).hasClass('disNone');
   if(firstName!=='' && inputMail==='' && !checkClass){
     $('button').attr('disabled','disabled');
//in the fiddle you would see a console.log('hi'), you just have to replace that code with this one for whatever button you want to disable
    }
});
});

结帐 FIDDLE LINK

在小提琴中，我遗漏了一个SPAN标记与类disNone和其他SPAN标记没有类{{ 1}}。所以只有一旦条件执行

Answer 2

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

名字字段不为空 - $('#firstName0').val() != ''
电子邮件字段为空 - $('#inputMail0').val() == ''
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/

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

2 个答案: