Question

I have this javascript:

$(function () {
    $.fn.enable = function () {
        return this.show().removeAttr("disabled");
    }

    $.fn.disable = function () {
        return this.hide().attr("disabled", "disabled");
    }

    var incomeType = $("#MyModel_IncomeTypeCheckBox");
    var incomeTypeStatusSection = $("#incomeTypeStatusDiv, #incomeTypeStatusDiv input, #incomeTypeStatusDiv textarea, #incomeTypeStatusDiv select");
    setControls();

    incomeType.change(function () {
        setControls();
    });

    function setControls() {
        switch (incomeType.val()) {
            case "FullTime":
                incomeTypeStatusSection.disable();
                break;
            case "PartTime":
                incomeTypeStatusSection.disable();
                break;
            case "SelfEmployed":
                incomeTypeStatusSection.enable();
                break;
            case "SocialSecurity":
                incomeTypeStatusSection.disable();
                break;
            case "Retirement":
                incomeTypeStatusSection.disable();
                break;
            case "ChildSupport":
                incomeTypeStatusSection.disable();
                break;
            case "Maintenance":
                incomeTypeStatusSection.disable();
                break;
            case "Other":
                incomeTypeStatusSection.disable();
                break;
        }
    }
});

The code in my view is simply:

<div id="incomeTypeStatusDiv">
   <!--Show some hidden inputs here-->
</div>

MyModel.IncomeTypeCheckBox is based on an enum which corresponds to the case values above.

I am able to use the above javascript with a drop down list, for example. The selection will show/hide the appropriate <div>.

I am now trying to use that same code to show/hide based on the check box list selection, but without success. The <div> I want to hide is showing up and not being hidden. What am I missing that it won’t work with a checkbox list? How do I make this work with a check box list (i.e., if I click “SelfEmployed” check box it will show appropriate <div> and when I uncheck “SelfEmployed” checkbox it will hide the <div>?

I could do:

$(document).ready(function () {
    $("input[name$='stepincomeinformation.incometypecheckbox']").click(function () {
        var check_value = $(this).val();
        if (check_value == 'selfemployed') {
            $("#incometypecheckbox_selfemployed").toggle(this.checked);
        }
    });
    $("#incometypecheckbox_selfemployed").hide();
    });

but then if the <div> is hidden, it won’t allow me to move on because it’s trying to validate. The other javascript doesn’t validate the <div> if it’s hidden.

The javascript is based upon Validating a dynamic UI with Mvc2, and has worked well for me. It’s used to disable validation when the <div> is hidden (and uses a mod to MicrosoftMvcValidation.js as well as a binder.

Any help is appreciated.

SEE FINAL RESULT BELOW (Based on Answer)

Answer 1

in the code you posted, an incomeType variable is set:

var incomeType = $("#MyModel_IncomeTypeCheckBox");

At this point, I’m guessing that MyModel_IncomeTypeCheckBox is the name assigned to all of the incomeType checkboxes.

If that’s the case, then this likely explains why there are issues.

First, because MyModel_IncomeTypeCheckBox is a name, and not an ID, jQuery can’t access the value via $('#MyModel_IncomeTypeCheckBox')

Second, even if jQuery could access what MyModel_IncomeTypeCheckBox would contain in a normal form submission, the rest of the code would only work when a single box is checked, as multiple boxes being checked would result in MyModel_IncomeTypeCheckBox containing a comma-separated string of checkbox values for the selected checkboxes.

So, there are two options here.

The first option is the ugly task of checking each checkbox individually by its ID, but that’s not what you want since it’s painful and inefficient.

The second option is to change interpretation of the incomeTypes that are checked to something like this:

function setControls() {
    $('input:checked[name="MyModel_IncomeTypeCheckBox"]:checked').each(function () {
        var checkedIncomeType = $(this).val();
        handleShowHide(checkedIncomeType);
    });
}

function handleShowHide(incomeType)
{
    // move the switch statement here
}

Now I haven’t tested this, but it should get you most of the way there, at least. Let me know if you have any questions.