Jay Jay - 21 days ago 5
CSS Question

Jquery checkbox affect one item not all items

I was wondering if someone can help me please, I have a series of checkboxes that when clicked change the div background, activate 2 inputs and add a tick icon. My issue is that when one check box is checked the class .TickIco shows for all and so does the .disableToggle

How can i get it so that this only affects one .checkBG at a time and not all of them?

Hopefully this JSFiddle will help explain what I mean.

https://jsfiddle.net/jayjay89/xfg96we5/

thanks

$(".checkBG").click(function () {
var checked = $(this).is(':checked');
var location = $(this).parent().parent().parent();
if (checked) {
$(this).parent().parent().parent().addClass("activeformBlock");
$(".tickIco").show();
$(".disabletoggle").removeAttr("disabled");


} else {
$(this).parent().parent().parent().removeClass("activeformBlock");
$(".tickIco").hide();
$(".disabletoggle").attr('disabled', 'disabled');
}


});

thanks

Answer

you can use the context in which the selector will be looked.

You already have the location variable which is the parent context for one of your row

$(".checkBG").click(function () {
    var checked = $(this).is(':checked');
    var location = $(this).parent().parent().parent();
    if (checked) {
        $(this,location).parent().parent().parent().addClass("activeformBlock");
        $(".tickIco",location).show();
        $(".disabletoggle",location).removeAttr("disabled");


    } else {
        $(this,location).parent().parent().parent().removeClass("activeformBlock");
        $(".tickIco",location).hide();
        $(".disabletoggle",location).attr('disabled', 'disabled');
    }
});