How do I handle an if condition in jQuery

I have class that has an image

<a class="proceed-btn right" onclick="validateall();" style="cursor: pointer;">Proceed To Next Step >>></a>

WHICH HAS THIS CSS

.proceed-btn {
  background:url("images/proceed-btn.gif") no-repeat scroll 0 0 transparent;
  height:35px;
  width:275px;
}

then on the same page I have these input fields and links

<input type="text" id="name" name="name" value="" class="field left">
<input type="text" id="company" name="company" value="" class="field left">
<input type="text" id="email" name="email" value="" class="field left">

<a onclick="setindustry('3');" style="cursor: pointer;" class="industry_links highlight">Retail</a>

<a onclick="setsystems('5');" style="cursor: pointer;" class="count_links highlight">5</a>

I want to make the top button to have .new_button class when all the following are met

.new_button { background-position: 0 -35px; text-decoration: none; color: #fff; }

there is at least one letter for each of the text fields and both industry_links and count_links classes have at least one class with the highl开发者_高级运维ight class

basically i want to change the color of the button when all five are met

Sorry its so confusing

var allHaveAtleastOneLetter = true;
$("input[type='text']").each(function(){ allHaveAtleastOneLetter && ($(this).val().length > 0 )});

var industryLinksHasHighlight = $(".industry_links.highlight").length > 0;

var countLinksHasHighlight = $(".count_links.highlight").length > 0;

if(allHaveAtleastOneLetter && industryLinksHasHighlight && countLinksHasHighlight){
   $("proceed-btn.right").addClass("new_button");
}

Ok I've gone for the method I think is the most readable.
Here goes:

if($('#name').val().length>0 && 
   $('#company').val().length>0 && 
   $('#email').val().length>0 &&
   $('.industry_links.highlight').length > 0 &&
   $('.count_links.highlight').length > 0
  ) {
   // Of course you could make #FF0000 any colour you want
   $('.proceed-btn.right').css('color', '#FF0000');
}

On those buttons you are checking use the css function to test:

$('.buttonsClass').each(function(){

if(this.css('text-decoration') == 'none'
   && ... )
 this.addClass('new_button');
});

Not sure if my syntax is correct, but using firebug it should be easy to implement.

in psudo jquery so it's more readable as a general pattern:

$(elements you are looking for).change(function() {
    if(condition A &&
      condition B &&
      . 
      .
      .
      condition Z)
     {
        $(element you want to change).addClass('class you want to add');
     }
});

You listen for changes in any of the elements, test if all the conditions are met, then apply the change.

You're doing it wrong.

If it were me, I would use a validation toolkit (like this one http://bassistance.de/jquery-plugins/jquery-plugin-validation/) -- and if the form passed validation, add a class to your button using 'addClass' to change the color of the button.

If the form fails validation, remove the class (and disable the button?).