Javascript jquery禁用状态未正确触发

在本例中，我从两个下拉列表中选择与两个单独的div容器相对应的元素。当用户在第一个select元素中选择一个选项时，该特定值在相应的div中更改为disabled true。为了更好地了解问题，我附加了两个特定部分的图像

第一个图像显示选定元素的初始状态。“选择标准”元素对应于“我的能量标准”部分，“选择周期”对应于“我的学习周期”部分

问题

当我从select下拉列表中选择一个句点（1到40之间的任意位置）时，就会出现问题。理想情况下，如果我选择1年，“我的学习周期”div中的第一个复选框应该被禁用。然而，这样做的结果是在2003年被禁用。但是，如果我选择任何大于4的年份，它将按照您的预期工作

我已经包括了与每个部分对应的代码部分

代码

    //Select a Standard Code section
$("#baselineResidentialStandardYear").change(function () {
    standardValue = $("#baselineResidentialStandardYear").val();
    console.log(standardValue);
    //if (standardValue == $("#" + standardValue).attr('id') && $('#' + standardValue).hasClass("standard")) {
    //    $('#' + standardValue).attr('disabled', true);
    //    $("#standards").find('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);
    //}
    if ($('#' + standardValue).hasClass("standard")) {
        if (standardValue == $('#' + standardValue).attr('id')) {
            $('#' + standardValue).attr('disabled', true);
            $('#standards').find('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);
        }
    }
});

//Select Period code
$("#baselineResidentialStudyPeriod").change(function () {
    period = $("#baselineResidentialStudyPeriod").val();
    console.log(period);
    //if (period == $('#' + period).attr('id') && $('#' + period).hasClass("studyPeriod")) {
    //    console.log("test");
    //    $('#' + period).attr('disabled', true);
    //    $("#years").find('input[type=checkbox]').not('#' + period).attr('disabled', false);
    //}

    $('#years').find('input[class=checkbox]').each(function () {
        if ($(this).hasClass("studyPeriod")) {
            $('#' + period).attr('disabled', true);
            $('#years').find('input[type=checkbox]').not('#' + period).attr('disabled', false);
        }
    });
});

我不太清楚为什么会发生这种错误的交互，即使我使用的是.find方法

进口票据

    //Select a Standard Code section
$("#baselineResidentialStandardYear").change(function () {
    standardValue = $("#baselineResidentialStandardYear").val();
    console.log(standardValue);
    //if (standardValue == $("#" + standardValue).attr('id') && $('#' + standardValue).hasClass("standard")) {
    //    $('#' + standardValue).attr('disabled', true);
    //    $("#standards").find('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);
    //}
    if ($('#' + standardValue).hasClass("standard")) {
        if (standardValue == $('#' + standardValue).attr('id')) {
            $('#' + standardValue).attr('disabled', true);
            $('#standards').find('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);
        }
    }
});

//Select Period code
$("#baselineResidentialStudyPeriod").change(function () {
    period = $("#baselineResidentialStudyPeriod").val();
    console.log(period);
    //if (period == $('#' + period).attr('id') && $('#' + period).hasClass("studyPeriod")) {
    //    console.log("test");
    //    $('#' + period).attr('disabled', true);
    //    $("#years").find('input[type=checkbox]').not('#' + period).attr('disabled', false);
    //}

    $('#years').find('input[class=checkbox]').each(function () {
        if ($(this).hasClass("studyPeriod")) {
            $('#' + period).attr('disabled', true);
            $('#years').find('input[type=checkbox]').not('#' + period).attr('disabled', false);
        }
    });
});

“我的能源标准”div中的复选框元素的值属性为1到4。 “My Study Periods”div中的复选框元素的值属性为1到40

---

我必须维护此信息，因为此信息将用于从数据库检索更多补充信息。

您需要将此

$('#' + standardValue).attr('disabled', true);

而这个

$('#' + period).attr('disabled', true);

进入

$('#standards #' + standardValue).attr('disabled', true);

而且

$('#years #' + period).attr('disabled', true);

分别

---

您的另一个问题是，当您使用重复ID时，在某些浏览器上可能会失败。您应该将这些ID更改为类。拥有多个id=“1”等是不好的做法。

不完全确定您想要实现什么，但请参见