CODEWITHSUNDEEP
jqueryajaxjson
Tarang Hirani
Tarang Hirani

Reputation: 590

jquery dynamic input disabling and refresh on change

I am working with input elements that need to switch back and forth between being disabled and enabled. When the user selects a year from the dropdown menu, that particular year should be disabled in the input element. However, when the user changes a year, the new year should be disabled.

Here's the jQuery that I have come up with. It works fine except for it does not refresh when a new change is made. i.e. multiple years can be disabled which is not appropriate for the app. Only one year can disabled at any given time.

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

Here's a screenshot for a visual reference:

enter image description here

Upvotes: 0

Views: 122

Answers (1)

blgt
blgt

Reputation: 8205

Looks like you need to clear all other "disabled" attributes when you enable one on the new checkbox. Something that should go along the lines:

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

Also, keep in mind the call to .attr('disabled', disabled) is expecting a boolean, not a string. Calling .attr('disabled', '') and .attr('disabled', 'disabled') will both disable an input.

Upvotes: 1

Related Questions