Add class when (...) with jQuery

Question

I've this simple code:

HTML:

<input type="text" name="name" class="required" />

<select id="options" name="options" size="1">
  <option value="0"> YES </option>
  <option value="1"> NO </option>
</select>


<input type="text" name="email" />
<input type="text" name="city" />

Question:

I want to add class = "required" to email and city fields when options is equal to 1

Felix Kling · Accepted Answer · 2011-05-17 09:42:42Z

3

Something like:

$('#options').change(function() {
    $('input[name="email"], input[name="city"]')
       .toggleClass('required', this.value === '1');
});

Reference: change, toggleClass

answered May 17, 2011 at 9:42

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cheerio Over a year ago

I love this new solution. Thank you :)

Rory McCrossan · Accepted Answer · 2011-05-17 09:41:56Z

1

I've added Id's to your input elements to make the selector quicker:

 <input type="text" name="email" id="email" />
 <input type="text" name="city" id="city" />

jQuery:

$("#options").change(function() {
    if ($(this).val() == "1") {
        $("#email, #city").addClass("required");
    }
    else {
        $("#email, #city").removeClass("required");
    }
});

answered May 17, 2011 at 9:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Rory McCrossan Over a year ago

If you're referring to the extra bracket on the if statement - I just removed it.

ingo · Accepted Answer · 2011-05-17 09:42:36Z

0

if( $('#options').val() == "1"){
   $('#email, #city').addClass('required');
}

answered May 17, 2011 at 9:42

ingo

5,5991 gold badge26 silver badges19 bronze badges

Comments

Amareswar · Accepted Answer · 2011-05-17 09:42:56Z

0

assign ids to the inputs and do following logic , ids are always better as it takes less time to execute in case of complex DOMs.

$('#options').change(function(){
if($(this).val() == 1) {
 $('#inputemail').addClass('required');
 $('#city').addClass('required');
}else {
$('#inputemail').removeClass('required');
 $('#city').removeClass('required');
}
});

answered May 17, 2011 at 9:42

Amareswar

2,0641 gold badge21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Add class when (...) with jQuery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related