Jquery复选框影响一个项目而不是所有项目

Jquery checkbox affect one item not all items

本文关键字：项目 一个 影响 复选框 Jquery      更新时间：2023-09-26

我想知道是否有人可以帮助我，请，我有一系列的复选框，当点击改变div背景，激活2个输入，并添加一个刻度图标。我的问题是，当一个复选框被选中时，类。tickico显示所有，所以。disabletoggle

我怎样才能使它一次只影响一个。checkbg而不是所有的?

希望这个JSFiddle能帮助你解释我的意思。

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

感谢
$(".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');
}

});

谢谢

您可以使用将在其中查看选择器的上下文。

你已经有了location变量它是其中一行的父上下文

$(".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');
    }
});

您的问题在于您选择.tickIco和.disabletoggle元素的方式:

$(".tickIco").show();
$(".disabletoggle").removeAttr("disabled");

这些jquery调用使用选择器匹配所有类的.tickIco和.disabletoggle。

脏解(使用 .find() 查找具有匹配类的父元素):

$(this).parent().parent().parent().find(".tickIco").show();
$(this).parent().parent().parent().find('.disabletoggle').removeAttr("disabled")

更好的解决方案:

jQuery选择器将选择的上下文作为第二个参数，因此您可以:

var context = $(this).parent().parent().parent();
$(".tickIco", context).show();
$('.disabletoggle', context).removeAttr("disabled")
相关文章：