Disable or Enable buttons based on some conditions

Question

In my app I have multiple divs which look like (The divs are created dynamically):

<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. [email protected]" aria-invalid="true">
        <span class="common-sprite sign-up-cross first"></span>
    </div>
</div>

The names are dynamically generated according to the index (For example the are email[1], email[2].....).

I have a button which should be disabled in case the field of the first name is not empty and the field of the email is empty and the span hasn't a class of disNone.

How should I disable the button according to above condition?

Answer 1

Hope this condition works out for you.

Store the jQuery objects in variables and use that variables instead, which is a much better way to do it.

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

});

EDIT: If your DIVS are being generated dynamically you can use the each() jquery function to loop through them.

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

Checkout the FIDDLE LINK

In the fiddle I have left out one SPAN tag with class disNone and other SPAN tag without class disNone. So only once the condition executes

Answer 2

If I understand you correctly, you want to disable the button if all of the following conditions are met:-

1. First name field is NOT empty - $('#firstName0').val() != ''
2. Email field IS empty - $('#inputMail0').val() == ''
3. Span does NOT have class of disNone - !$('span').hasClass('disNone')

So I would check that condition this way by wrapping it in a listener on the keyup event upon the form:

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

Demo: http://jsfiddle.net/ajj87Lg3/