CODEWITHSUNDEEP
jqueryajaxjson
Tarang Hirani
Tarang Hirani

Reputation: 590

Input element disable bug between two divs

I have two divs that each contain input elements that hold data that are very different from each other. Each div is dependent on a value from a select element. When a user chooses a value from one div, that particular input element in that div is getting disabled. However, the issue I am facing is that at any given time only one input element from each is disabled. Since they hold different information it interferes with the logic.

Here's the code for the first 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);
    }
});

Here's the code for the second 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);
    }
});

enter image description here

As the image shows, 2003 and 1 year are selected. However, in the first div 2003 is enabled which should be disabled. What exactly is the bug here?

Upvotes: 0

Views: 43

Answers (1)

Barmar
Barmar

Reputation: 781761

The line

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

enables all other checkboxes, not just the ones in the current DIV. You need to restrict it to the corresponding DIV. Give the DIVs around the checkboxes IDs, and refer to those in the change handlers.

<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

Upvotes: 1

Related Questions