輸入元素禁用兩個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); 
    } 
}); 

下面是第二格

$("#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年都被選中。但是，在第一個2003年是啓用應該被禁用。這裏的bug究竟是什麼？

Answer 1

線

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

使所有其他複選框，不只是在當前DIV的人。您需要將其限制爲相應的DIV。在複選框ID周圍提供DIV，並參考更改處理程序中的那些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