Jquery each disabled

Question

with this code : http://jsfiddle.net/oreli/7wdq6ktn/

I like to have the following behavior:

• When input is "disabled": the label is red
• When input is not "disabled": label is green (or vice versa, no matter :) )

but I still have all red or green.

What is my mistake?

thank you

$(document).ready(function () {
 $( ".choice" ).each(function() {
    if($(".orderChoice").is(":disabled")) {
        $(".choice").addClass('disabled').remove('notdisabled');
    } else {
        $(".choice").addClass('notdisabled').remove('disabled');
    };
 });
});

Answer 1

Try changing your each function. $(selector) in each does not refer to current iteration element. Try this:

 $( ".choice" ).each(function(index, element) {
    if($(element).is(":disabled")) {
        $(element).addClass('disabled').remove('notdisabled');
    } else {
        $(element).addClass('notdisabled').remove('disabled');
    };
 });

Answer 2

you need to check for the current input element, using this. Otherwise it will always checks for the first element with that class

$(document).ready(function() {
    $(".choice").each(function() {
        if ($(this).find(".orderChoice").is(":disabled")) {
            $(this).addClass('disabled').remove('notdisabled');
        } else {
            $(this).addClass('notdisabled').remove('disabled');
        };
    });

});

Answer 3

You are selecting all the .choice and applying the class. Use context:

$(document).ready(function () {

    $( ".choice" ).each(function() {
        if($(this).find("input").is(":disabled")) {
            $(this).addClass('disabled').remove('notdisabled');
        } else {
            $(this).addClass('notdisabled').remove('disabled');
        };
    });

});

Fiddle: http://jsfiddle.net/7wdq6ktn/2/