CODEWITHSUNDEEP
jquerycssrazor
joetinger
joetinger

Reputation: 2729

Changing color of span text with JQuery

I have some some CSS that changes the color of my Validation text color. I would like the color to change to green when a checkbox is checked. My JQuery doesn't seem to like the reference to the tag. Any suggestions?

Razor HTML

@Html.TextBoxFor(model => model.textBox)
@Html.ValidationMessageFor(model => model.textBox,"Required", new { @class = "disableRequired" })

CSS

span.disableRequired.field-validation-error{
   color:yellow;
}

JQuery doesn't work

$('#checkBox').click(function () {
     $("span.disableRequired.field-validation-error").css("color", "green");
});

Upvotes: 1

Views: 7333

Answers (2)

Chris Hawkes
Chris Hawkes

Reputation: 12420

Your JavaScript code is fine, if there are no errors in the console (check Google Chrome) than it should work just fine. Here is a JsFiddle which proves it's correct JavaScript code. You're problem must be elsewhere. 

$('span.disabled').click(function () {
    $('.disabled').css("color", "red");
});

Upvotes: 3

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Here is the solution

CSS

.greentext
{
    color: green;
}

Javascript

$('#checkBox').click(function () {

    if($(this).is(":checked")) {
        $("span.disableRequired.field-validation-error").addClass("greentext");
    }
    else {
        $("span.disableRequired.field-validation-error").removeClass("greentext");
    }
});

Upvotes: 5

Related Questions