Jquery logic working 3/4 of the way (check box lis

I have a check box list, each check box having it's own unique ID appended to the name of the checkbox. The behavior I am after is that if ONE checkbox (here: "SelfEmployed") is checked, then a hidden <div> is shown. If it is unchecked, the <div> is hidden. The default is to have the <div> hidden. Inside the <div> are other inputs, in this case a textbox.

The code I am using works 3 out of 4 times, which I will explain below.

This is the jquery code at the top of my MVC view:

$(document).ready(function () {
    $("input[name$='MyModel.IncomeTypeCheckBox']").
            click(function () {
        var check_value = $(this).val();
        if (check_value == 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                toggle(this.checked);
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                    removeAttr("disabled");
        }
        else if (check_value != 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                hide().attr("disabled", "disabled");
        }
 });
    $("#IncomeTypeCheckBox_SelfEmployed, 
        #IncomeTypeCheckBox_SelfEmployed input").
        hide().attr("disabled", "disabled");
});

(Note: I hard-returned the line - don't like the way SO doesn't automatically wordwrap code which then leads to scrollbars)

The "disabled" part is important and is added/removed as an attribute for any inputs. I am using a validation binder which essentially won't allow any of the inputs inside a hidden <div> to throw a validation error (obviously, when the <div> with the inputs is shown then that attribute is removed and any validation errors will work).

On a page I have the checkbox list and one textbox input. Both are required (the checkbox uses a custom [Mandatory] data annotation attribute). There is also the hidden <div> with another textbox input. These are the scenarios (of which 3 out of 4 work):

Page loads. "SelfEmployed" is NOT checked. Hitting "Submit" will fire validation if nothing is selected in the checkbox and/or the first textbox is empty. The hidden <div> does not fire validation because the <input> within has it's attribute set to disabled="disabled". EXPECTED BEHAVIOR - PASS.
Page loads. Selecting anything other than "SelfEmployed" in the checkbox and inputting something in the textbox will allow page to submit. The hidden <div> does not fire validation because the <input> within has it's attribute set to disabled="disabled". EXPECTED BEHAVIOR - PASS.
Page loads. Selecting "SelfEmployed" in the checkbox shows the previously hidden <div> with that second textbox. Since the checkbox has something checked, and if something is typed into both the first textbox and the second textbox in the <div> which is now shown (i.e., the disabled="disabled" attribute is removed from the second <input>), then the page will submit. EXPECTED BEHAVIOR - PASS.
Page loads. Same as # 3, except this time, if you do not fill in that second textbox in the <div> and try to submit a validation error is thrown on that second textbox (expected). If you fill in that second textbox and submit the page it works (expected). HOWEVER, if the validation error still appears and you UNCHECK the "SelfEmployed" checkbox (causing the <div> to be hidden again - this is expected), and then try to submit the page (validation passes on checkbox and first textbox), it will not submit. FAIL.

A check of the HTML source shows that the disabled="disabled" attribute is not being reinserted when the "SelfEmployed" checkbox is unselected in scenario # 4 above (which hides the <div>). This occurs only if a validation error is thrown on the second textbox when the <div> container is shown and then you hide it again and try to submit. Note that if I just check/uncheck the "SelfEmployed" checkbox without trying to submit (and firing any validation) you see in Chrome's Dev Tools the disabled="disabled" being added and removed, respectively, to the <input> tag.

How can I fix that last problem? Thanks.

This is working for me:

$(document).ready(function () 
    {
        $("input[name$='StepIncomeInformation.IndividualIncomeTypeCheckBox']").click(function () {
            if ($('#StepIncomeInformation_IndividualIncomeTypeCheckBox_SelfEmployed').is(':checked')) {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').show().removeAttr("disabled");
            }
            else {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').hide().attr("disabled", "disabled");
            }
        });
        $("#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input").hide().attr("disabled", "disabled");
    });