javascript - jquery禁用状态未正确触发

Question

在本例中，我有两个下拉选择元素，它们对应于两个单独的 div 容器。当用户在第一个选择元素中选择一个选项时，相应 div 中的特定值将更改为禁用 true。为了更好地了解问题，我附上了特定部分的两张图像。

第一张图像显示了选择元素的初始状态。 “选择标准”元素对应于“我的能源标准”div，“选择时段”对应于“我的学习时段”div。

问题

当我从选择下拉列表中选择一个句点(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 方法，我也不太清楚为什么会发生这种错误的交互

IMP 注释

“我的能源标准”div 中的复选框元素具有从 1 到 4 的值属性。“我的学习周期”div 中的复选框元素的值属性为 1 到 40。

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

Answer 1

你需要做这个...

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

还有这个...

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

进入...

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

还有...

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

分别。

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