输入元素禁用两个div之间的错误

Question

我有两个div，每个div包含输入元素，这些元素保存彼此非常不同的数据。每个div都依赖于select元素的值。当用户从一个div中选择一个值时，该div中的特定输入元素将被禁用。但是，我面临的问题是，在任何给定时间，只有一个输入元素被禁用。由于它们拥有不同的信息，因此会干扰逻辑。

这是第一个div的代码。

$.getJSON('/ResidentialBuilding/getYear', function (data) {
    $.each(data, function (index, value) {
        $("#standards").append('<input type="checkbox" value="' + value.year + '"' + 'id="' + value.year + '">' + "<span>" + value.year + "</span>" + '</input><br>');
    });
});
$("#ResidentialStandardYear").change(function () {
    standardValue = $("#ResidentialStandardYear").val();
    console.log(standardValue);
    if (standardValue == $("#" + standardValue).attr('id')) {
        $('#' + standardValue).attr('disabled', true);
        $('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);
    }
});

这是第二个div的代码

$("#ResidentialStandardPeriod").change(function () {
    period = $("#ResidentialStandardPeriod").val();
    console.log(period);
    if (period == $('#' + period).attr('id')) {
        $('#' + period).attr('disabled', true);
        $('input[type=checkbox]').not('#' + period).attr('disabled', false);
    }
});

如图所示，选择了2003年和1年。但是，在第一个div中启用了应禁用的2003。究竟是什么错误？

Answer 1

该行

$('input[type=checkbox]').not('#' + standardValue).attr('disabled', false);

启用所有其他复选框，而不仅仅是当前DIV中的复选框。您需要将其限制为相应的DIV。在复选框ID周围给出DIV，并参考更改处理程序中的那些。

<div id="standardCB">
    <input type="checkbox" id="2003" value="2003">2003</input>
    <br>
    <input type="checkbox" id="2006" value="2006">2006</input>
    <br>
</div>
<div id="periodCB">
    <input type="checkbox" id="1" value="1">1</input>
    <br>
    <input type="checkbox" id="2" value="2">2</input>
    <br>
</div>

$("#standard").change(function () {
    stdval = $(this).val();
    console.log(stdval);
    if (stdval == $('#' + stdval).attr('id')) {
        $('#' + stdval).attr('disabled', true);
        $("#standardCB").find('input[type=checkbox]').not('#'+stdval).attr('disabled', false);
    }
});

$('#period').change(function(){
    periodval = $(this).val();
    if (periodval == $('#'+periodval).attr('id')){
        $('#'+periodval).attr('disabled',true);
        $("#periodCB").find('input[type=checkbox]').not('#'+periodval).attr('disabled',false);
    }
});

FIDDLE